on-mouseover

So funktioniert das Script:

Zunächst werden hier die Bilder definiert und vorgeladen.
Die Zahlenangaben beziehen sich auf die Abmessungen der Grafiken.
Sie sollten alle die selben Grössen haben.

<SCRIPT LANGUAGE="JavaScript">
pic = new Image(133, 145);
pic.src = "man3.gif";
pic = new Image(133, 145);
pic.src = "man4.gif";
pic = new Image(133, 145);
pic.src = "man5.gif";
</SCRIPT>

----------------
Jetzt muss für jede Grafik mit dem Attribut "name" ein Name vergeben werden.

----------------

Mit den Namen kann man jetzt auf die Objekte zugreifen, z.B.:

onMouseover="man2.src='man3.gif';
   man1.src='man4.gif';"

onMouseout="man2.src='man2.gif';
   man1.src='man1.gif';"

Das würde übersetzt bedeuten:

Tausche bei MOUSEOVER auf der Grafik mit Namen "man2"
die aktuelle Grafik mit dem Bild "man3.gif" aus.

Und Tausche bei Mouseover auf der Grafik mit Namen "man1"
die aktuelle Grafik mit dem  Bild "man4.gif" aus.

Tausche bei MOUSEOUT auf der Grafik mit Namen "man2"
die aktuelle Grafik mit dem  Bild "man2.gif" aus.

Und Tausche bei MOUSEOUT auf der Grafik mit Namen "man1"
die aktuelle Grafik mit dem  Bild "man1.gif" aus.

----------------

Wichtig ist:

Die einzelnen Grafiken müssen durch das Semikolon (;) getrennt werden.

Bei Zugriff auf zwei Grafiken z.B.:

onMouseover="man2.src='man3.gif';
   man1.src='man4.gif';"

Bei Zugriff auf drei Grafiken z.B.:

onMouseover="man2.src='man3.gif';
   man1.src='man4.gif';
   man1.src='man4.gif';"

----------------

Beispiel 3
Hier werden 3 Grafiken gleichzeitig getauscht.
Das lässt sich theoretisch noch steigern. Je mehr Grafiken man definiert bzw. auf einer Seite vorhanden sind, desto mehr kann man mit "onmouseover" und "onmouseout" belegen.