126 Ereignisse behandeln mit Javascript

Einleitendes Beispiel: Wenn die Maus über Bild bewegt wird, soll ein anderes Bild erscheinen oder ein Meldefenster angezeigt werden, oder ein bestimmter Text in der Statuszeile erscheinen, oder ...

In diesem Fall ist das Ereignis OnMouseOver. Das Gegenstück dazu ist das Ereignis OnMouseOut, das dann eintritt, wenn die Maus das Objekt verlässt.

Ereignisse sind im HTML-Sinne Attribute und können somit nur in Verbindung mit einem Tag auftreten. Die Ereignisse (es können auch mehrere sein) sind immer in den Aufruf des gewünschten Tags einzubetten, siehe spätere Demos.

Die Ereignissse OnMouseOver und OnMouseOut können in fast allen HTML-4.0-Tags verwendet werden, die häufigsten Anwendungen liegen bei folgenden Tags vor:

• Anker-Tag (Link-Tag) <a .... >,
• Image-Tag <img .... >
• Paragraphen-Tag (Absatz-Tag) <p  .... >

Andere Ereignisse sind nur bei bestimmten Tags möglich. In HTML-4.0 sind 18 Ereignisse definiert; sie werden am Ende dieser Seite mit ihren Anwendungsmöglichkeiten aufgelistet.

Ereignisse sind zwar im HTML-Sinne Attribute, die Zuweisung eines Wertes an das Attribut, also die Reaktion auf das Ereignis, muss aber in Javascript geschrieben werden. Dafür steht der gesamte Javascript-Sprachumfang zur Verfügung.
Die Javascript-Anweisungen werden eingefügt:

• als direkte Javascript-Anweisung im HTML-Text, oder
• als Aufruf einer selbstdefinierten Javascript-Funktion im HTML-Text

Demo 1: Die folgende Demo benutzt das Ereignis-Attribut OnMouseOver in Verbindung mit dem Paragraphen-Tag (Absatz-Tag)  <p ... >. Wie bereits erwähnt, kann dieses Ereignis bei fast allen HTML-4.0-Tags benutzt werden. Ereignisse sind immer in den Aufruf des gewünschten Tags einzubetten. Bei dieser Demo wird die Javascript-Methode alert() benutzt, die ein alert-Fenster (Hinweisfenster, Warnfenster) mit einem wählbaren Text anzeigt. Das alert-Fenster muß mit Tastenklick auf "OK" oder mit der Enter-Taster wieder geschlossen werden.

Der relevante Teil des Quelltextes:

   <p onMouseOver="alert('Reaktion auf Ereignis onMouseOver: hier Javascript-Methode alert()')" >
      Fahren Sie mit der Maus über diesen Absatz. Es wird dann ein alert-Fenster angezeigt.
   </p> 

Der Wert des Ereignis-Attributes, d.h. die Javascript-Anweisung, muss in doppelte Anführungszeichen gesetzt werden. Wenn - so wie hier - innerhalb der Javascript-Anweisung nochmals Anführungszeichen gebraucht werden, dann sind die einfachen Anführungszeichen zu benutzen. Wenn - was seltener vorkommt - die Ereignis-Reaktion aus mehreren Javascript-Anweisungen besteht, dann sind die weiteren Anweisungen vor dem schließenden doppelten Anführungszeichen mit Semikolon getrennt aufzuführen. Der Aufruf einer selbstdefinierten Javascript-Funktion wäre in diesen Fällen zweckmäßiger.

Man beachte unbedingt die verbindliche Schreibweise der Javascript-Begriffe. Die Javascript-Methode alert muss z.B. unbedingt in Kleinschreibweise angegeben werden.

Demo 2: Die folgende Demo benutzt die Ereignis-Attribute OnMouseOver und OnMouseOut, ebenfalls wieder in Verbindung mit dem Paragraphen-Tag.

Die Meldung in der Statuszeile funktioniert so nur beim Browser Safari; bei den anderen Browsern verschwindet die Meldung offensichtlich so schnell, dass sie nicht wahrgenommen werden kann - kein Beinbruch!

Der relevante Teil des Quelltextes:

    <p onMouseOver="window.status='Reaktion auf Ereignis onMouseOver: hier Javascript-Methode window.status'"
       onMouseOut ="window.status=''" >
       Fahren Sie mit der Maus über diesen Absatz und achten Sie auf die Statuszeile
   </p> 

Demo 3: Bilder wechseln. Man fahre mit der Maus über das Bild, das aber in dieser Demo nicht als Link verwendet wird.

Für diese Anwendung muss dem erstzuladenden Bild im IMG-Tag mit dem Attribut name ein (nahezu frei zu wählender) Name zugewiesen werden, dessen Schreibweise für den späteren Aufruf verbindlich ist. Der Autor benutzt für den Wert wegen der besseren Unterscheidbarkeit die Großschreibweise. Um beim Eintritt des Ereignisses ein anderes Bild zu laden, wird die Javascript-Methode document benutzt. Details siehe nachstehenden relevanten Teil des Quelltextes (die freie Wahl der Reihenfolge der Attributnennung wird hier dazu benutzt, die Objektnamen übereinanderzustellen):

     

      <img                name="BILDOBJEKT_1" src="GIF-Bilder/Ziffer-1.gif"
          onMouseOver="document.BILDOBJEKT_1.src='GIF-Bilder/Ziffer-2.gif'"
          onMouseOut ="document.BILDOBJEKT_1.src='GIF-Bilder/Ziffer-1.gif'"  >
     
     

Demo 4: Bilder wechseln. Das zweite Bild wird durch Anklicken als Link verwendet.

Achtung: Für name ist ein anderer Wert als bei Demo 3 notwendig! Der relevante Teil des Quelltextes:

     
     <a href="HTML-Start.htm"
        onMouseOver="document.BILDOBJEKT_2.src='GIF-Bilder/Ziffer-2.gif'"
        onMouseOut ="document.BILDOBJEKT_2.src='GIF-Bilder/Ziffer-1.gif'" >
        <img            name="BILDOBJEKT_2" src="GIF-Bilder/Ziffer-1.gif" Border="0" >
      </a>
     
     

Wenn sich der Link auf die gleiche Seite beziehen soll, also letztlich kein Link ausgeführt werden soll, wäre in diesem Beispiel die URL-Angabe "HTML-Start.htm" durch die Pseudo-URL "#" zu ersetzen.

Demo 5: Bilder wechseln. Ähnlich wie Demo 3. Nur wird hier bei den Ereignissen eine selbsdefinierte Javascript-Funktion Bildwechsel() aufgerufen.

Der relevante Teil des Quelltextes:

    
    <img SRC="GIF-Bilder/Ziffer-1.gif" Border="0" NAME="BILDOBJEKT_3"
          onMouseOver="Bildwechsel(2)"
          onMouseOut ="Bildwechsel(1)" >
   
   

Die Funktion BildWechsel() ist im head-Teil wie folgt enthalten:

   
     <script Language="Javascript">
      <!--
         function Bildwechsel(Nr) {
           if (Nr==1) document.BILDOBJEKT_3.src="GIF-Bilder/Ziffer-1.gif";
           if (Nr==2) document.BILDOBJEKT_3.src="GIF-Bilder/Ziffer-2.gif";
         }
      //-->
    </script>
   
   

In Javascript sind folgende Ereignisse programmierbar