[CSS] Bild bei hovern ändern [gelöst]

**The_Apocalypse** · 04. 02. 2012, 18:39

Hallo.
Und zwar habe ich eine Navigation, welche aus 4 Buttons, bzw. Bildern besteht. Geht man mit der Maus über eins, ändert es sich. Das klappt soweit ganz gut.

HTML-Code:

<img src="img/button1off.png" 
name="getinfinite" alt="sample image" 
onmouseover="document.getinfinite.src = 'img/button1on.png';"
onfocus="document.getinfinite.src = 'img/button1on.png';"
onmouseout="document.getinfinite.src = 'img/button1off.png';"
onblur="document.getinfinite.src = 'img/button1off.png';"
/>

Allerdings würde ich gerne das Bild als Hintergrundbild in der CSS festlegen damit ich den Button beschreiben kann. Allerdings habe ich auch nicht durch googeln herausgefunden wie ich in CSS das Bild bei mouseover ändern kann.
Jemand eine Idee?

danke im vorraus

**The_Apocalypse** · 04. 02. 2012, 18:50

gidf.de

Habs gelöst. Danke trotzdem

**Kugelfisch23** · 04. 02. 2012, 21:30

Da du in deinem Beispiel JavaScript nutzt und dabei einen nicht im DOM spezifizierten Weg zum Adressieren des img-Elements nutzt: wie hast du das gelöst? Sinnvoll wäre an dieser Stelle die Nutzung der :hover-Pseudoklasse (sowie ggf. der :focus-Pseudoklasse). Damit funktioniert der Effekt sogar unabhängig von der JavaScript-Unterstützung im Browser.

**aNtiCHrist** · 04. 02. 2012, 21:31

Zitat von The_Apocalypse

Allerdings habe ich auch nicht durch googeln herausgefunden wie ich in CSS das Bild bei mouseover ändern kann.

Habs gelöst.

Bitte mal etwas nachdenken. Genau durch solche Beiträge wird es erst schwer, eine Lösung zu finden, weil die Suchergebnisse vermehrt zu Seiten ohne Lösung führen ...

Wenn man selbst eine Lösung findet, sollte man sie sinnvollerweise auch nennen. Eine sinnvolle Lösung wäre hier etwa http://www.wellstyled.com/css-nopreload-rollovers.html.