:hover bei <img>

[Gunnar]

Hallo zusammen,

ich habe ein Problemchen - folgender Aufbau:

<div>
<a><img /></a>
</div>
(Natürlich noch mit den entsprechenden Eigenschaften...)

Möchte nun beim :hover ein anderes Bild anzeigen.
Das will irgendwie nicht funktionieren.

Mit onmouseover/onmouseout klappt es perfekt.
Ist aber eben JavaScript erforderlich - geht das auch irgendwie ohne?

Danke für eure Hilfe.

Gruß
Gunnar

[Beat]

<div>
<a><img /></a>
</div>
(Natürlich noch mit den entsprechenden Eigenschaften...)
Möchte nun beim :hover ein anderes Bild anzeigen.
Das will irgendwie nicht funktionieren.

Wie sieht dein CSS aus?
Mit CSS kannst du
entweder den background des a Elementes dynamisch austauschen,
oder den content von a:before oder a:after dynamisch austauschen.

mfg Beat

[Gunnar]

Eine CSS habe ich leider (für diesen Teil noch) nicht.

Grund hierfür:
Ich habe vier DIVs.
Diese möchte ich verlinken, da man ja DIVs nicht verlinken kann, habe ich in die DIVs je ein Bild gesetzt, das dann verlinkt ist.

Jetzt sieht das ganze ganz einfach so aus:

.navigation {  
 float: left;  
 width: 100px;  
 height: 100px;  
}

<div class="navigation">  
	<a href="http://www.test.tst">  
		<img src="bild.gif" width="100px" height="100px" onmouseover="this.src='x.gif'" onmouseout="this.src='bild.gif'" />  
	</a>  
</div>  
  
<div class="navigation">  
	<a href="http://www.test.tst">  
		<img src="bild2.gif" width="100px" height="100px" onmouseover="this.src='x2.gif'" onmouseout="this.src='bild2.gif'" />  
	</a>  
</div>

Wie funktioniert das mit dem :before bzw. :after?
Ich kann hier doch eigentlich auch nur das background-image ändern oder?

[Beat]

Wie funktioniert das mit dem :before bzw. :after?
Ich kann hier doch eigentlich auch nur das background-image ändern oder?

Nehmen wir folgenden Fall
<a class="IR1 bild1" href="http://example.org">Linkziel</a>

Ein normaler link mit einer Klasse die an Image-Replacement-1 erinnert.
die zweite Klasse zeigt später, welches Bild wir einfügen als Background wollen

Zuerst mal die Technik, die aus MSIE versteht.
also mit background-image

a.IR1
{
   display:block;  /* wir brauchen Block Eigenschaften */
   width:200px;    /* nimm an das Bild habe eine width von 200px */
   height:30px     /* ditto */
   color:#fff;     /* schriftfarbe */
   background:#000 url(background.jpg) top right no-repeat;
   /* Wir wollen die Schrift hinaus komplimentieren */
   text-indent:-99em; /* sollte reichen */
   overflow:hidden;   /* nichts anbrennen lassen */
}
a.bild1{background: url(background.jpg) top right no-repeat;}

Ich habe das jetzt nicht getestet.

Selbst arbeite ich nochmals etwas komplexer, weil ich Sprites einsetze.
(Viele Bildausschnitte im gleichen Bild)

Diese Technik löst nicht den Fall CSS an, Bilder aus.
Mit diesem Mangel kann man aber leben.
Normalerweise verwende ich bei Buttons die Schrift im Text, muss sie also nicht hinauskomplimentieren.
(text-indent entfällt)

Beispielanwendung siehst du auf meiner HP (Link im Head der Message)

mfg Beat

[Gunnar Bittersmann]

@@Gunnar:

Möchte nun beim :hover ein anderes Bild anzeigen.
Das will irgendwie nicht funktionieren.

Mit onmouseover/onmouseout klappt es perfekt.
Ist aber eben JavaScript erforderlich - geht das auch irgendwie ohne?

Mit ':hover' kannst du nur CSS-Eigenschaften beeinflussen. Das 'src'-Attribut des 'img'-Elements ist keine solche. 'background-image' wäre eine.

Live long and prosper,
Gunnar