Anja: Verlinktes Bild bei hover austauschen

Beitrag lesen

Hallo,

ich will ein Logo, das auf die Startseite verlinkt ist, beim Hovern durch ein anderes ersetzen. Das geht wie folgt:

#logo {background:url(image.png) height:61px;}
#logo:hover {url(image-hover.png)}

<div id="logo"><a href="http://domain.de/"><img src="transparentes-bild.png" /></a></div>

Allerdings hat diese Lösung zwei Probleme:

  • Der IE6 zeigt das transparente Bild nicht an
  • Durch das transparente Bild muss zusätzlich geladen werden und verlangsamt den Seitenaufbau.

Mit der Suchfunktion habe ich in diesem Forum folgendes Thema gefunden: http://forum.de.selfhtml.org/archiv/2004/9/t90745/#m544736

div.logo {width:800px; height:61px;}
div.logo:hover {background-image:url(image-hover.png);}
div.logo:hover img {display:none;}

<div class="logo"><a href="http://domain.de/"><img src="image.png" /> </a></div>

Das Problem: Beim Hovern verschwindet nicht nur das Bild, sondern auch die Verlinkung.

Ich bin nun am Ende meines Lateins. Hat jemand einen Vorschlag, wie ich die Sache anpacken kann?

Grüße
Anja