Verlinktes Bild bei hover austauschen

[Anja]

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

[ChrisB]

Hi,

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

Sie „verschwindet“ nicht, sie ist auch vorher schon „nicht da“ - weil der Link ohne Inhalt keine Ausdehnung mehr hat.

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

Gebe dem Link entsprechende Maße.
Wenn dein Latein auch das noch nicht her gibt, dann informiere dich, was man mit inline-Elementen machen muss, damit sie width und height annehmen dürfen.

MfG ChrisB

[Anja]

Danke!

Folgendes funktioniert nun:

<div class="logo"><a href="http://domain.de/" style="display:block; height:61px; width:800px;"><img src="image.png" /></a></div>

[Matthias Apsel]

Om nah hoo pez nyeetz, Anja!

<div class="logo"><a href="http://domain.de/" style="display:block; height:61px; width:800px;"><img src="image.png" /></a></div>

auf Inline-Style-Angaben sollte man verzichten.

Matthias

[Jan]

Stimmt :-)

<p style="font-size: 16px;">Als Brückentage oder auch Fenstertage (in Österreich manchmal auch Zwickeltage)[...]</p>

Gruß Jan

[Matthias Apsel]

Om nah hoo pez nyeetz, Jan!

Stimmt :-)

<p style="font-size: 16px;">Als Brückentage oder auch Fenstertage (in Österreich manchmal auch Zwickeltage)[...]</p>

Tja, so ist das mit der Bequemlichkeit, wenn diese beiden Absätze die einzigen sind, die sich von den anderen unterscheiden und es nicht wert sind im stylesheet

als

#inhalt-startseite p {font-size: 16px;}
#inhalt-startseite p + p {margin-top: 2em;}

ausgezeichnet zu werden.

Aber vielleicht mach ich das dann heute. ;-)

Wahrscheinlich sogar eher

#inhalt-startseite p {font-size: 16px; margin-bottom: 2em;}

Danke für den Hinweis.

Matthias

[suit]

Stimmt :-)

<p style="font-size: 16px;">Als Brückentage oder auch Fenstertage (in Österreich manchmal auch Zwickeltage)[...]</p>

WIN :D

[Matthias Apsel]

Om nah hoo pez nyeetz, Anja!

#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>

Wenn der Link das einzige Element des divs "logo" ist, ist das div überflüssig.

Matthias