nicht angemeldet
Unterschiedliche Hover/Mouseover erzeugen
Matthias ApselHallo 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
-
Om nah hoo pez nyeetz, Joessef!
Verwende die gewünschten Bilder als (maximal) 3 Hintergrundgrafiken.
Matthias
--
1/z ist kein Blatt Papier.
