Bildertausch mit Javascript
Der Effekt wird häufig als Simulation eines Buttons verwendet. Dazu nötig sind zwei beziehungsweise drei unterschiedliche Grafiken pro Bildertausch.
Für einen einfachen Bildertausch werden nur zwei Bilder benötigt. Setzen wir voraus, die Bilder tragen den Namen bild_a.jpg und bild_b.jpg, so könnte ein einfacher Bildertausch wie folgt realisiert werden:
<script language="JavaScript"> <!-- function doHover(b,i) {f = document[b].src; f = f.substr(0,f.length-5); f+=i+'.jpg'; document[b].src = f; } //--> </script> <a href="#" onmouseover="doHover('bild1','b')" onmouseout="doHover('bild1','a')" > <img border="0" name="bild1" src="bild_a.jpg"> </a>Die Funktion doHover erwartet zwei Parameter, den Bildnamen und das Ende des Dateinamens. Vorausgesetzt die Bilder heißen also bild_a.jpg und bild_b.jpg, dann wird bei onmouseover (dem Überfahren mit der Maus) das ursprüngliche Bild durch das mit dem Ende b.jpg ersetzt. Andersherum wird bei onmouseout (der Cursor verlässt das Bild) wieder das Originalbild mit a.jpg am Ende angezeigt. Enthält eine Seite mehrere Bilder, die einen Hover-Effekt erhalten sollen, muss jedes Bild einen anderen Namen tragen (name-Attribut). Passen Sie dann die Parameter der doHover-Funktion an und übergeben Sie den geänderten Bildnamen. Soll sich das Bild auch ändern, wenn auf den Button geklickt wird, braucht das Beispiel lediglich etwas erweitert werden.
Anzeige