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