Bildwechsel - Beispiel für JavaScript-Programmierung

Die Bilder in den folgenden drei Bildbeispielen haben die Nummern 3, 4 und 5. Die Nummerierung beginnt deshalb nicht mit 0, weil die Seite bereits drei Bilder vor diesen enthält
HTML-Quelltextabschnitte im body-Teil Wirkung Aktionen
<a href="javascript:ring_farbe(3,ring_blau)"
  onMouseOver="ring_farbe(3,ring_gruen)"
  onMouseOut="ring_farbe(3,ring_rot)"
  style="text-decoration:none">
<img src="ring_rot.gif" border="0">
</a>
Klicken: Fläche wird blau.
Mauszeiger drauf: Fläche wird grün.
Mauszeiger weg: Fläche wird rot.
<a href="javascript:ring_farbe(4,ring_blau)"
  onMouseDown="ring_farbe(4,ring_gruen)"
  onMouseOut="ring_farbe(4,ring_rot)"
  style="text-decoration:none">
<img src="ring_rot.gif" border="0">
</a>
Maustaste loslassen: Fläche wird blau.
Maustaste drücken: Fläche wird grün.
Mauszeiger weg: Fläche wird rot.
<a href="javascript:wechsel_5()"
  style="text-decoration:none">
<img src="ring_rot.gif" border="0">
</a>
Klicken: Fläche ändert Farbe.
rot ---> grün ---> blau


JavaScript-Quelltext im head-Teil
<script type="text/javascript">
<!--
var i=0;                          /* Zähler */
var ring_rot=new Image();         /* rotes Bild-Objekt */
var ring_gruen=new Image();       /* grünes Bild-Objekt */
var ring_blau=new Image();        /* blaues Bild-Objekt */
ring_rot.src="ring_rot.gif";      /* rotes Bild-Objekt laden */
ring_gruen.src="ring_gruen.gif";  /* grünes Bild-Objekt laden */
ring_blau.src="ring_blau.gif";    /* blaues Bild-Objekt laden */

function ring_farbe(nummer,ring)
{
  document.images[nummer].src=ring.src; /* Bild überschreiben */
}

function wechsel_5()
{
  i++;
  i=i%3;
  if (i==0) ring_farbe(5,ring_rot);
  else if (i==1) ring_farbe(5,ring_gruen);
  else ring_farbe(5,ring_blau);
}
//-->
</script>


Autor: Ulrich Kritzner