onMouseover - onMouseout

Javascript kann nicht nur auf Mausklicks -onClick()- , sondern auch auf Mausbewegungen - onMouseover und onMouseout - reagieren.

• Erstelle eine HTML-Seite staedte.htm. Setze die Bilder nebeneinander auf die Seite:
• Setze ein Textfeld und einen Button "Schließen" auf die Seite.

  <form name="Eingabe">
     <input type="text" />
     <input type="button" value="..." Zeige" onClick="..." />
  </form>
  

• Beim Überfahren der Städte mit der Maus soll im Textfeld der Name der Stadt angezeigt werden.

• Setze die Breite der Bilder auf 150 Pixel und die Höhe auf 100 Pixel.

  <img src="muenchen.jpg" width="150" height="100" />
  

• Bezeichne die Form mit "Meldung" und das Textfeld mit "Anzeige":

  <form name="Meldung" action="">
     <textarea name="Anzeige" .... ></textarea>
  </form>

• Lege für das Textfeld die Eigenschaft readonly fest.

  <textarea name="Textfeld" rows="1" cols="10" readonly="readonly"></textarea>
  

• Wenn die Maus in die Bilder fährt, wird die Beschreibung der Stadt angezeigt:

  onMouseover="document.Meldung.Anzeige.value='München'";

• onMouseout löscht den Text wieder.
  

• Erstelle eine HTML-Seite bildtausch.htm.
• Die Bilder:
• Schreibe ein Script, das die Funktionen onMouseover und onMouseout nutzt, um die Bilder mit dem Text gegen die richtigen Bilder auszutauschen.

• Für die Bilder brauchst du zwei Arrays:
  eins für die Originalbilder Bild[ ] und eins für die Texte MausBild[ ]

  Bild=new Array();
  MausBild=new Array();
  Bild[0] = "bild_stadt.jpg";
  MausBild[0] = "schrift_stadt.jpg";
  
  Bild[1] = "bild_land.jpg";
  MausBild[1] = "schrift_land.jpg";
  
  Bild[2] = "bild_meer.jpg";
  MausBild[2] = "schrift_meer.jpg";
  

  Achte darauf, dass die Pfade stimmen!
• Das Script MausHerein() sorgt für den Tausch der Bilder beim Hereinfahren der Maus.
  Als Parameter werden die Position des Bildes in der Reihenfolge ihres Auftretens und die Nummer des Bildes innerhalb des Arrays übergeben.
  Damit die Bilder die genau gleiche Größe haben, legst du sie mit width und height fest.

  function MausHerein(Position,Nummer)
  {
     document.images[Position].width="150";
     document.images[Position].height="100";		
     document.images[Position].src = Bild[Nummer];
  }

• Das Script MausHeraus() erledigt den Bildtausch in umgekehrter Richtung:

  function MausHeraus(Position,Nummer)
  {
     document.images[Position].width="150";
     document.images[Position].height="100";		
     document.images[Position].src = MausBild[Nummer];
  }

• Die Script werden innerhalb des img-Tags aufgerufen:

  <img src="../gif/bruecken/text_hohenzollern.jpg" border="0"  alt="" onMouseover="MausHerein(0,0);" onMouseout="MausHeraus(0,0);" />
  

  Denke daran, dass die übergebenen Parameter in den Funktionen MausHerein() und MausHeraus() jeweils um eins erhöht werden!