Event-Handler: onMouseOver()

Mittels eines Event-Handlers ist es möglich, bei bestimmten Aktionen des Users (einem Event also) JavaScript-Code auszuführen. Dieses Beispiel veranschaulicht den Gebrauch von Event-Handlern: Wenn der Mauszeiger über dem Link ruht, tritt der Event-Handler onMouseOver in Aktion. Diesem wird als Argument eine oder mehrere JavaScript-Anweisungen mitgegeben, die dann ausgeführt werden. In dem Beispiel wird in diesem Fall ein Text in der Statusbar (das ist der Bereih im unteren Rand des Navigators) angezeigt.

Ein Link nach Nirgendwo!

<A HREF="javascript:void(0)"
  onMouseOver="self.status='Dieser Link fuehrt nirgendwohin.';
               return true">
Ein Link nach Nirgendwo!</A>

Ein zweites Beispiel zeigt den Gebrauch von Handlern am Beispiel einer Imagemap: Immer dann, wenn der Mauszeiger sich über dem Bild bewegt (onMouseOver()), wird die Grafik durch eine andere ausgetauscht, sobald der Mauszeiger den Bereich des Bildes verläßt (onMouseOut()), wird wieder das Originalbild angezeigt. Das zweite Bild wird übrigens erst bei der Aktivierung durch onMouseOver() vom Browser geladen, je nach Verbindung zum Server kann es also durchaus zu Verzögerungen kommen, bis sich das Bild ändert. Nach einem Bildwechsel sind allerdings beide Bilder im Browser-Cache, der Wechsel geschieht dann fliessend.

<MAP NAME="augeMap">  
<AREA 
      COORDS = "0,0, 228, 185"
      SHAPE  = "RECT"
      HREF="javascript:void(0)"
      onMouseOver="auge.src='augeauf.gif'"
      onMouseOut="auge.src='augezu.gif'"
</AREA>
</MAP>

<IMG SRC="augezu.gif" NAME="auge" USEMAP="#augeMap" 
 WIDTH=228 HEIGHT=185 BORDER=0>