Joessef: Unterschiedliche Hover/Mouseover erzeugen

Hallo allerseits,

ich habe auf einer Seite drei unterschiedliche, verlinkte Bilder, die zur Navigation dienen (nicht direkt eine Nav-Leiste). Diese Bilder sollen einen Mouseover-Effekt erhalten.
Und zwar für jedes Bild einen eigenen. Bei drei ursprünglichen Buttons brauche ich also insgesamt 6 Bilder.
Für die "normale" Anzeige sind die Bilder rathaus-bild1.jpeg, kirche-bild1.jpeg und schule-bild1.jpeg gedacht.
Die Mouseover-Bilder heißen demnach rathaus-bild2.jpeg, kirche-bild2.jpeg, schule-bild2.jpeg.

Hier der bisherige Code:

  
<html>  
<head>  
  
  
<style type="text/css">  
  
div { border:0px solid #D06E27; }  
  
  #button1 {position:absolute; top:330px; left:250px; width:170px; height:150px }  
  #button2 {position:absolute; top:330px; left:500px; width:170px; height:150px }  
  #button3 {position:absolute; top:330px; left:750px; width:170px; height:150px }  
  
  </style>  
  </head>  
  <body>  
  
<div id="button1"> <a href="index.php?id=rathaus"><img src="http://beispielurl.de/rathaus-bild1.jpeg" alt="Rathaus"/></a> </div>  
    <div id="button2"> <a href="index.php?id=kirche"><img src="http://beispielurl.de/kirche-bild1_.jpeg" alt="Kirche"/></a> </div>  
    <div id="button3"> <a href="index.php?id=schule"><img src="beispielurl.de/schule-bild1_.jpeg" alt="Schule"/></a></div>  
  </body>  
</html>  

Ich dachte, es würde genügen, im img-Tag ein
onmouseover="this.src='beispielurl.de/rathaus-bild2.jpeg'"
einfüge. Dann erscheint bei mir im aktuellen Firefox kein Mouseover-Effekt. Es tut sich nichts.

Wie ist der obige Quellcode zu erweitern, damit ich die verschiedenen Mouseover-Bilder erhalte?
Ich möchte kein JavaScript verwenden. An sich dachte ich, dass es einfach wäre...
Danke
Joessef

  1. Om nah hoo pez nyeetz, Joessef!

    Verwende die gewünschten Bilder als (maximal) 3 Hintergrundgrafiken.

    Matthias

    --
    1/z ist kein Blatt Papier.