Bildwechsel 3


Bildwechsel durch Mausklick

     
Bild 1 <a href="#" onMouseUp="Bildwechsel('bild1',Highlight1); return false">Bild 1</a>
Bild 2 <a href="#" onMouseUp="Bildwechsel('bild1',Highlight2); return false">Bild 2</a>
Bild 3 <a href="#" onMouseUp="Bildwechsel('bild1',Highlight3); return false">Bild 3</a>
Bild 4 <a href="#" onMouseUp="Bildwechsel('bild1',Highlight4); return false">Bild 4</a>
Bild 5 <a href="#" onMouseUp="Bildwechsel('bild1',Highlight5); return false">Bild 5</a>
Bild <img src="img/transpix.gif" width="163" height="240" name="bild1" border="0">

<head>
<script language="JavaScript">
<!--
Highlight1 = new Image();
Highlight1.src = "img/bild1.gif";

Highlight2 = new Image();
Highlight2.src = "img/bild2.gif";

Highlight3 = new Image();
Highlight3.src = "img/bild3.gif";

Highlight4 = new Image();
Highlight4.src = "img/bild4.gif";

Highlight5 = new Image();
Highlight5.src = "img/bild5.gif";


function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
</head>


Erklärung:
Hier ist nun kein neuer Lerninhalt hinzugekommen. Das Script im Head erzeugt wieder aller erforderlichen Image Objekte. In der Funktion werden die Parameter aufgeführt, die später in den Links vergeben werden. Die Links rufen mittels Event Handler onMouseUp die Funktion Bildwechsel auf, wodurch die Anweisung ausgeführt wird.
Zur Erinnerung hier nochmal ein Hinweis zum zweiten Befehl return false in den Links, der allerdings in diesem Falle bei IE nicht funktioniert..


 

Javascript Tipps