onmouseover onmouseout Menübild ändern

armin999 · 12. Januar 2012, 23:44

Hallo erstmal, ich wollte ein Menü erstellen, wobei sich das Menübild ändert sobald ich mit der maus darüber fahre...

Dynamische grafische Buttons

siehe hier, und diesen code habe ich auch verwendet, es ging leider nicht, nun, habe ich ein paar stunden weiter gebastelt, und gesucht, und bin jetzt bei diesem ergebnis, das ich hier in einem geschlossenen thread gefunden habe, das funkt aber auch nicht bitte kann mir jemand helfen!!!
im head
var src1 = 'Bilder/kontakt1.jpg';
var src2 = 'Bilder/kontakt2.jpg';

im body das bild mit dem darüberligendem link

Quellcode

<div id = "menu">
<table >
<tr>
<td> <a href ="links/link1.html">
<img src="bilder/Kontakt1.jpg" alt ="Kontakt" style="border-radius:5px; opacity: 0.7;"
onmouseover="this.src = src2"
onmouseout="this.src = src1" /> </a> </td>
</tr>
</table>
</div>

Alles anzeigen

Maze · 13. Januar 2012, 15:04

Warum nimmst du dafür uraltes und langsames Javascript und nicht einfaches CSS .

Bei denen due die Links mit einem Hintergrund versiehst dun mit dem pseudoelement :hover den Hintergrund änderst.

Siehe z.B. so:
Rollover-Buttons mit CSS - Beispiel 5

Geht einfach mit:

Quellcode

a {
display:block;
background-image:url(button.gif);
width:120px; height:30px
}
a:hover {
background-image:url(button_on.gif);
}

fertig.

Quellcode

Quellcode

Teilen