JavaScript für Alle!

[Beschreibung] [Quelltext] [Erläuterung] [Übung] [Referenz]

Bilder dynamisch tauschen

Fang die Maus

Drück mich

Beschreibung

Wenn der Cursor über die obere Bildleiste bewegt wird, dann folgt die Katze dem Zeiger. Nähert sich die Katze der Maus, so ergreift die Maus die Flucht.

Wird der Cursor über den unteren Button bewegt, so ändert sich das dargestellte Bild. Beim Drücken der Maustaste ändert sich das Bild erneut.

Quelltext


<head>
<script language="JavaScript">
<!--
  maus=1;
  katz=5;

  function load() {
    if(document.images == null) {
      alert("Ihr Browser unterstuetzt die beschriebenen Funkionen leider nicht");
      return;
    }
    document.images["feld"+maus].src="maus.gif";  
    document.images["feld"+katz].src="katzel.gif";
    dummy=new Image();
    dummy.src="katzer.gif";
  }

  function over(num) {
    if(document.images == null)return;
    window.status="Fang die Maus ...";
    document.images["feld"+katz].src="leer.gif";
    dist=maus-num;
    if(Math.abs(dist) <= 2) {
      document.images["feld"+maus].src="leer.gif";
      if(dist < 0) {
        maus=num-2;
        if(maus < 0)maus=9;
      } else {
        maus=num+2;
        if(maus > 9)maus=0;
      }
      document.images["feld"+maus].src="maus.gif";
    }
    if(num > katz) {
      document.images["feld"+num].src="katzer.gif";
    } else {
      document.images["feld"+num].src="katzel.gif";
    }
    katz=num;

  }
//-->
</script>

<script language="JavaScript">
<!--
  if(document.images != null) {
    butt1=new Image();
    butt1.src="button1.gif";
    butt2=new Image();
    butt2.src="button2.gif";
  }

  function button(num) {
    if(document.images == null)return;
    if(num == 0)window.status="";
    if(num == 1)window.status="Drueck mich !";
    if(num == 2)window.status="Autsch !";
    document.butt.src="button"+num+".gif";
  }
//-->
</script>
</head>

<body>
Fang die Maus
<table border cellspacing=0 cellpadding=0 bgcolor="#ffffff">
<tr><td>
<script language="JavaScript">
<!--
  for(ii=0; ii<10; ii++) {
    document.write('<a href="#" onMouseOver="{over('+ii+'); return true;}">');
    document.write('<img src="leer.gif" width=50 height=30 border=0 name="feld'+ii+'"></a>');
  }
//-->
</script>
</table>

Drück mich
<a href="#"
 onMouseOver="{button(1); return true;}" 
 onMouseOut="{button(0); return true;}"
 onClick="{button(2); return false;}"></a>
</body>

Erläuterung

Fang die Maus
Die obere Bildleiste besteht aus zehn Einzelbildern; diese werden von einer for Schleife zunächst mit "leeren" Bildern (d.h. Bildern, bei denen alle Pixel transparent gesetzt sind) gefüllt. Gleichzeitig wird für alle Bilder ein Link angelegt und das onMouseOver-Ereignis definiert.
Nach dem Laden der Seite ruft das onLoad-Ereignis die JavaScript-Funktion load auf. In dieser Funktion werden eine nach links laufende Katze und die Maus in der Bildleiste positioniert. Außerdem wird vorsorglich schon einmal das Bild einer nach rechts laufenden Katze geladen, damit es sich bei späterer Benutzung bereits im Cache des Browsers befindet und damit schneller dargestellt werden kann.
Die Funktion over wird aufgerufen, wenn der Cursor über eines der Einzelbilder bewegt wird. Die Funktion bestimmt jeweils die neue Position von Katze und Maus, ersetzt die Bilder an der alten Position durch leere Bilder und fügt die Bilder an der neu bestimmten Position ein. Dabei wird jeweils entschieden, ob die nach links oder nach rechts laufende Katze dargestellt werden muß.

Drück mich
Der Button wird durch einen Link und ein Image realisiert. Die Ereignisse onMouseOver, onMouseOut und onClick bewirken einen Aufruf der Funktion button mit dem Argument 1, 0 bzw. 2 .
In der Funktion button wird das Bild für den Button jeweils durch das als Übergabeargument angegebene Bild ausgetauscht. Die Bilder 1 und 2 wurden wieder ebenfalls vorsorglich in den Cache geladen.

border	Umrandung darstellen ?
complete	komplett geladen ?
height	Höhe des Bildes in Pixeln
hspace	horizontaler Abstand
lowsrc	alternatives "low Source" Bild
name	Name des Bildes zur Referenzierung mit JavaScript
src	URL der Bild-Datei
vspace	vertikaler Abstand
width	Breite des Bildes in Pixeln

Außerdem besitzen die image-Objekte folgende Ereignisse:

onAbort der Anwender hat das Laden des Bildes abgebrochen
onError das Bild konnte nicht geladen werden
onLoad das Bild wurde erfolgreich geladen

Mit dem Konstrukt

 bild = new Image();
 bild.src = "bild.gif";

wird ein neues Image-Objekt erzeugt. Dieses wird zwar nicht dargestellt, die Zuweisung der src-Eigenschaft bewirkt aber ein Laden des Bildes in den Cache des Browsers. Damit wird erreicht, daß bei einer späteren Verwendung des Bildes dieses nicht mehr über Netz geladen werden muß.

Auf der nächsten Seite spielen wir eine Klang-Datei ab

onAbort	der Anwender hat das Laden des Bildes abgebrochen
onError	das Bild konnte nicht geladen werden
onLoad	das Bild wurde erfolgreich geladen

Beschreibung

Quelltext

Erläuterung

Übungsaufgabe

Referenz

images[], images.length

image-Objekt