 Eventhandler
 Die Mausaktivitäten überwachen und dann gegebenenfalls eine entsprechnde Aktion auslösen - Voraussetzung für den Bildtausch.
onMouseOver="TuWas()" Bei "MausDrüber" tue etwas
onMouseOver ist wohl der bekannteste Ausdruck und schafft die Grundlage für einen Bildtausch!
Mittlerweile hat sich der Begriff "MouseOver" für einen Bildtausch bereits etabliert. Statt 'Rollover-Button' wie in den USA hört man hier häufig 'MouesOver-Button', wenn man von einem Bildtausch für Menübuttons spricht.
|
|
|
onMouseOver steht hier in meinen Erklärungen stellvertretend für alle Event-Handler 
Event-Handler wie onMouseOver, onMouseOut sind ein Verbindungsglied zu JavaScript und werden heute als HTML-Anweisungen angesehen! Daher stehen solche Anweisungen auch nicht innerhalb einer JavaScript-Deklaration wie:
<script type="text/javascript" language="JavaScript">
Möglichkeiten
Nach alten (Netscape) Regeln konnte man Event-Handler mit JavaScript-Anweisungen zu einem Bildtausch nur in Verweise einbauen. Das bedeutet in der Praxis, der Link enthält dann zusätzliche Anweisungen für eine Tauschaktion. Diese Aktion soll in einer bestimmten Situation ausgelöst werden. Zum Beispiel dann, wenn der Mauszeiger über den Verweis bewegt wird.
Nach den neuen Regeln sind solche Angaben auch in anderen HTML-Tags erlaubt, zum Beispiel in Tags für Bilder <img>, Listelementen <li>, Absätzen <p>, ...
onMouseover arbeitet nach diesem Prinziep:
... bei diesem Ereignis löse eine Aktion aus!
... bei diesem Event löse eine Aktion aus!
Die Maus-Events werden vom Browser überwacht und können, wenn entsprechende Anweisungen vorhanden sind, eine Aktion auslösen.
Maus-Aktion überwachen und Handeln
Diese Aktionen-auslösende-Maus-Ereignisse nennt man Event-Handler [ivent-händler].
So heißen die nun mal, ich deute die Namensgebung wie: 'Die können einen Event 'händeln' - mit einem Ereignis umgehen.
Es gibt etwa 20 verschidene Event-Handler:
Event-Handler onMouseOver (beim Überfahren des Elements mit der Maus)
Event-Handler onMouseOut (beim Verlassen des Elements mit der Maus)
Event-Handler onMouseDown (beim Niedergedrückthalten der Maustaste)
Event-Handler onMouseUp (bei losgelassener Maustaste)
Event-Handler onMouseMove (bei einer Mausbewegung)
...
... nicht nur für Maus-Aktivitäten
Event-Handler onclick (beim Anklicken eines Objekts)
Event-Handler onfocus (beim Aktivieren)
Event-Handler onkeydown (bei einer gedrückter Taste)
...
Für uns im Augenblick interessant sind lediglich onMouseOver und onMouseOut
Bsp: Event-Handler onMoseOver
Die Notierung für einen Link ...
<a href="dateiname.htm"> ... </a>
... erhält zusätzlich eine MouseOver-Anweisung
<a onMouseOver="Anweisungen" href="dateiname.htm"> ... </a>
Die Anweisung soll lauten: Tausche die Grafik mit dem Namen 'grafik05' gegen die Grafik mit dem Dateinamen 'opa.jpg' aus! Das sieht in der Notierung so aus:
<a onMouseOver="grafik05.src='opa.jpg'" href="dateiname.htm"> ... </a>
Dort wo sie im Link die Pünktchen sehen, würde man eine Grafik notieren. Diese Grafik erhält ein Attribut für den Namen. Als Name müsste man hier 'grafik05' eintragen (auf Groß- / Kleinschrift achten).
<img name="grafik05" src="oma.jpg" width="400" height="30" border="0" alt="">
Das wäre dann bereits ein einfacher Bildtausch der ausgelöst wird, sobald der Mauszeiger über den Link bewegt wird.
Das funktioniert - ein Mal.
Will man das Bild bei MouseOut wieder zurücktauschen muss eine weitere Anweisung für onMouseOut eingetragen werden. Kein Problem
<a onMouseOut="grafik05.src='oma.jpg'" onMouseOver="...
Ergebnis:
Anweisungen für den Bildtausch können direkt am Link eingetragen werden.
<a href="dateiname.htm"
onMouseOver="grafik05.src='opa.jpg'"
onMouseOut="grafik05.src='oma.jpg'"
<img name="grafik05" src="oma.jpg" width="400" height="30" border="0" alt="">
</a>
So könnte man das für jede Grafik eintragen. Für eine einzelnes Foto durchaus akzeptabel. Für eine Menüleiste mit 20 Buttons würden die Notierungen aber schnell unübersichtlich.
Arbeitsanweisungen zusammenfassen
Es wäre also eine Überlegung wert, ob man nicht Arbeitsschritte zusammenfassen kann. Schön wäre es, am Bild eine kurzen Befehl zu notieren der auf die JavaScript-Anweisungen für den Bildtausch an zentraler Stelle verweist.
<a onMouseOver="tauschen" onMouseOut="tauschen" href="datei.htm"> ... </a>
Na ja, ganz so einfach wie hier dargestellt geht das nicht, aber eine Vereinfachung ist möglich.
Mit den Eintragungen direkt am Link, kamen wir bisher ohne weitere JavaScript-Anweisungen aus. Es muss also auch kein Bereich mit einer "JavaScript-Deklaration" definiert werden, in dem man die Anweisungen für Bildtauschaktionen zusammnfasst. Das ändert sich, wenn wir unser Vorhaben zur Vereinfachung umsetzen!
 MouseOver / Rollover für mehrere Bilder einer Seite
Probleme?
Falls es einmal Probleme gibt und die Bildtauschaktionen nicht funktionieren, suchen sie zu allererst bei den Anführungszeichen. Anführungszeichen kommen immer paarweise vor. In jeder MouseOver / MouseOut-Anweisung gibt es 2 Paare einstrichige Anführungszeicehn (Hochkommas) und ein Paar normale Anführungszeichen. Führt das nicht zum Erfolg kontrollieren sie die Schreibweise für die Objektnamen (auf Groß- / Kleinschrift achten).
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK 
