JavaScript - Austauschen von Bildern

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert das Austauschen von Bildern auf Button-Druck.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Spezifikation for-Schleife] [Objektreferenz images] [Objektreferenz Array] [Objektreferenz elements]

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 namen=new Array("begin.gif","up.gif","prev.gif","next.gif","down.gif");
  /* Array aller Bildernamen */
var bilder=new Array();
  /* Definition des Bilder-Arrays */

function lade()
  /* Laedt die Bilder */
{
  var i;                     /* lokale Variablendeklaration */
  for (i=0;i<5;i++)          /* Schleife: i=0..4 */
  {
    bilder[i]=new Image();   /* neues Image-Objekt erzeugen */
    bilder[i].src=namen[i];  /* Quelldateiname des Bildes setzen */
  }
}

function zeige(nr)
  /* zeigt ein Bild an */
{
  document.images[0].src=bilder[nr].src;
    /* Bild austauschen */
}

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

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

<a href="bilder1.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf bilder1.html -->

<br>
<br>
<br>

<img src="begin.gif" width="64" height="64">
  <!-- Das Bild -->

<br>

<form>  <!-- HTML-Formular definieren -->

  <!-- Buttons zum Veraendern des Bildes : -->
<input type=button value="begin.gif" onClick="zeige(0)"><br>
<input type=button value="up.gif" onClick="zeige(1)"><br>
<input type=button value="prev.gif" onClick="zeige(2)"><br>
<input type=button value="next.gif" onClick="zeige(3)"><br>
<input type=button value="down.gif" onClick="zeige(4)"><br>
  <!-- das waren die Buttons -->

</form> <!-- HTML-Formular beenden -->
</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner