Skift billede når musen føres over

Hej
Først lidt html:
<div id="index">
<h1>webjunglen</h1>
<h2>kreativ Webudvikling</h2>
<a href="forside.php" title="Forside"><img src="images/home.png" alt="Forside" title="Denne knap fører dig til forsiden" /></a>
<a href="referencer.php" title="Referencer"><img src="images/referencer.png" alt="Referencer" title="Klik her for at se vores Referencer" /></a>
<a href="priser.php" title="Priser"><img src="images/www.png" alt="Priser" title="Klik her for at se vores priser" /></a>
<a href="kontakt.php" title="Kontakt"><img src="images/kontakt.png" alt="Kontakt" title="Klik her for at kontakte os" /></a>

<div id="indexhidden">
<a href="forside.php" title="Forside"><img src="images/forsidetxt.png" alt="Forside" title="Denne knap fører dig til forsiden" /></a>
<a href="referencer.php" title="Referencer"><img src="images/referencertxt.png" alt="Referencer" title="Klik her for at se vores Referencer" /></a>
<a href="priser.php" title="Priser"><img src="images/prisertxt.png" alt="Priser" title="Klik her for at se vores priser" /></a>
<a href="kontakt.php" title="Kontakt"><img src="images/kontakttxt.png" alt="Kontakt" title="Klik her for at kontakte os" /></a>
</div>

<div id="indexmenu">
<h6>Webjunglen.dk &copy; 2011-2011
<a href="forside.php" title="Forside">Forside</a> |
<a href="referencer.php" title="Referencer">Referencer</a> |
<a href="priser.php" title="Priser">Priser</a> |
<a href="kontakt.php" title="Kontakt">Kontakt</a>
</h6>

</div>
</div>

Og lidt CSS:
body {
    background-color: #1a1a1a
    }
#wrapper {
    width: 530px;
    margin:auto;
    }
#index h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size:48pt;
    color: #ccc;
    text-align: center;
    margin-top: 40px;
    }
#index h2 {
    font-family: 'Delius Swash Caps', cursive;
    font-size:15pt;
    color: #ccc;
    text-align: center;
    padding-top: 8px;
    }
#index img {
    display:inline;
    width:250px;
    margin:auto;
    }
   
#indexhidden {
    display: none;
    text-decoration:none;
    font-family: 'Delius Swash Caps', cursive;
    font-size:8pt;
    color: #ccc;
    text-align: center;
    padding-top: 8px;
    background-color: 2a2a2a;
    height: 50px;
    margin-bottom: 25px;
   
    }
#indexmenu {
    background-color: 2a2a2a;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height: 50px;
    }
   
#indexmenu h6 {
    font-family: 'Delius Swash Caps', cursive;
    font-size:8pt;
    color: #ccc;
    text-align: center;
    padding-top: 8px;
   
   
    }
#indexmenu a {
    text-decoration:none;
    font-family: 'Delius Swash Caps', cursive;
    font-size:8pt;
    color: #ccc;
    text-align: center;
    padding-top: 8px;
    background-color: 2a2a2a;
    height: 50px;
    margin-bottom: 25px;
   
    }
   
#indexmenu a:hover {
    display:none;
    }
#indexhidden a:hover {
    display: display;
    }
Hvorfor virker ovenstående ikke? Det er godt nok mit bedste bud.

Det er meningen at når man fører musen over billederne, skal de skifte med det andet billede..

KAn godt nok ikke gennemskue det :)

Ved godt det kan laves i Javascript, men håbede lidt det også kunne lade sig gøre i CSS :)