Bildwechsel 7

<head>
<script language="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "img/kugel1.jpg";
Highlight1 = new Image();
Highlight1.src = "img/kugel2.jpg";
Highlight2 = new Image();
Highlight2.src = "img/kugel3.jpg";


function Bildwechsel(bildna){
window.document.images[bildna].src = Highlight1.src;
}


function Bildwechsel1(bildna){
window.document.images[bildna].src = Normal1.src;
}

function Bildwechsel2(bildna){
window.document.images[bildna].src =Highlight2.src;
}

//-->
</script>
</head>
<a href="#" onMouseOver="Bildwechsel(0); setTimeout('Bildwechsel2(0)',150)" onMouseOut="Bildwechsel(0);setTimeout('Bildwechsel1(0)',150)"><img src="img/kugel1.jpg" width="100" height="100" border="0"></a>

Hier werden 2 Bilder hintereinander geladen, dadurch entsteht ein Übergangseffekt. Das Ganze wird bewerkstelligt, indem man für jedes Bild eine Funktion aufruft, wobei die zweite Funktion mit setTimeout etwas verzögert ausgeführt wird. Hier wurden anstatt Bildnamen wieder Bildnummern verwendet. In der Funktion ist nur ein Parameter namens bildna, welchem dann im Eventhandler die jeweilige Bildnummer zugewiesen wird. Bildwechsel(0) Dabei steht 0 für das zuerst auf der Html Seite eingefügte Bild, 1 für das zweite, 2 für das dritte usw.