Alex: css und mouseover

Beitrag lesen

Hallo,

<img src="jump.jpg" border="no" id="yump" name=yump
onmouseover="document.yump.src='jump2.jpg'" onmouseout="document.yump.src='jump3.jpg'"></a>

Du hast die Attribute teilweise in Anführungszeichen gesetzt und teilweise nicht, ansonsten sieht's aber OK aus. Etwas vereinfacht:

<img src="jump.jpg" onmouseover="this.src='jump2.jpg'" onmouseout="this.src='jump3.jpg'" />

aber nun, ich glaube, es liegt daran, dass das blog mit css gemacht wird...

Das hat eigentlich nichts damit zu tun. Mit CSS könnte man aber auch ein Mouseover machen. Allerdings kann man mit CSS nur Hintergrundbilder austauschen. Du könntest also ein transparentes Bild anzeigen...

<img id="meinBild" src="transparent.png" />

...und dieses mit CSS so formatieren, dass das eigentliche Bild als Hintergrundbild "hindurchschimmert" und dieses Hintergrundbild bei Mouseover ausgetauscht wird:

#meinBild        { background:url('jump.jpg'); }  
#meinBild:hover  { background:url('jump2.jpg'); }

Letzteres funktioniert auch ohne JavaScript, ist aber eigentlich nicht Sinn der Sache, da hier Inhalt zu Gestaltung gemacht wird. Um das Ganze noch ruckelfrei zu bekommen, müssen die Mouseover-Bilder noch in den Browsercache geladen werden. Das geht entweder mit JavaScript (siehe hier) oder man zeigt das Bild irgendwo auf der Seite unauffällig (1x1px) an. Schließlich gibt es noch die Möglichkeit, normales und Mouseover-Bild in ein Bild zu packen und dieses bei Mouseover mit CSS zu verschieben (siehe hier, das Bild sieht so aus).

Alex