Bildwechsel 2

<head>
<script language="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "buttn1.gif";
Highlight1 = new Image();
Highlight1.src = "buttn2.gif";

function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}

//-->
</script>
</head>

Hier ein Textlink, der das erste Bild name="bild1" auswechselt.

<a href="#" onMouseOver="Bildwechsel('bild1',Highlight1)" onMouseOut="Bildwechsel('bild1',Normal1)">Textlink</a>

Mausbewegung auf dem ersten Bild ändert das zweite name="bild2"

<img src="img/bild1.gif" border="0" name="bild1">	<img src="img/bild1.gif" border="0" name="bild2">

Erklärung:
Hier haben wir nur 2 verschiedene Bilder, die zwar öfter vorkommen, jedoch ist das im Zusammenhang mit dem Image Objekt egal.
Deshalb wurden nur 2 Image Objekte erzeugt:

1. Image Objekt / Normal1
das Bild, welches beim Start der Seite angzeigt wird und was noch wichtiger ist, es wird mittles onMouseOut wieder hergestellt.

Normal1 = new Image();
Normal1.src = "img/bild1.gif";

2. Image Objekt / Highlight1
das Bild, welches mittels onMouseOver ausgetauscht wird.

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

Ein anderer Unterschied zur vorangegangenen Seite ist die Tatsache, dass hier den Bildern Namen vergeben wurden.

<img src="img/bild1.gif" border="0" name="bild1">
<img src="img/bild1.gif" border="0" name="bild2">

Zuvor hatten wir den Parameter Bildnr, der bestimmte, das wievielte Bild der Seite ausgetauscht werden sollte. Anstatt der Bildnummer wird nun der Bildname zugewiesen.
Hierbei muß der Name in Anführungszeichen bzw. in einfachen Anführungszeichen stehen.

Die function mit den Parametern im Head Bereich

function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}

Der Name wird dem Bild zugewiesen

Der Event handler, der die function aufruft und den Parametern die Werte zuweist

onMouseOver="Bildwechsel('bild1',Highlight1)"

So hat man die Möglichkeit die Bilder anstatt über die Bildnummer über den Namen anzusprechen. Das hat den Vorteil, dass man man keine Reihenfolge einhalten muß, egal wieviele Bilder noch auf der Seite sind, die nichts mit dem Script zu tun haben.
Auf diese Art und Weise hat man eine Vielzahl von Möglichkeiten. Auch der Einsatz eines transparenten Bildes ist denkbar, welches durch ein anderes ersetzt wird. Ein transparentes Bild, im Gif Format besteht aus nur 1 Pixel und einer transparenten Farbe.

Javascript Tipps