JavaScript - mausgesteuertes Austauschen von Bildern

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert das Austauschen von Bildern beim Überfahren eines Links mit der Maus.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz images]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

var bildnext,bildprev;
  /* Definition des Bilder-Arrays */

function lade()
  /* Laedt die Bilder */
{
  bildnext=new Image();    /* neues Image-Objekt erzeugen */
  bildnext.src="next.gif"; /* Quelldateiname des Bildes setzen */
  bildprev=new Image();    /* neues Image-Objekt erzeugen */
  bildprev.src="prev.gif"; /* Quelldateiname des Bildes setzen */
}

function over()
  /* tauscht Bilder */
{
  document.images[0].src=bildnext.src;
  document.images[1].src=bildprev.src;
}

function out()
  /* tauscht Bilder */
{
  document.images[0].src=bildprev.src;
  document.images[1].src=bildnext.src;
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="lade();">

  <!-- Link zurueck auf bilder3.html : -->
<a href="bilder3.html"
   onMouseOver="over();"
   onMouseOut="out();"
   style="text-decoration:none">
<img src="prev.gif" width="32" height="32" border="0">
Erkl&auml;rung
<img src="next.gif" width="32" height="32" border="0">
</a>

</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner