 Einsatzbereiche für MouseOver-Aktionen
Wird der Mauszeiger über eine Grafik geführt, soll ein Bild-Objekt ausgetauscht werden. Auch Bildwechsel / Image-Change / rollover genannt. Die Tauschaktion muss nicht unbedingt am Objekt selbst ausgelöst werden.
|
|
Demos Einsatzbereiche für MouseOver und MouseOut
Die beiden Event-Händler onMouseOver / onMouseOut stehen in meinen Erklärungen stellvertretend für alle anderen Eventhandler. Mit ein wenig Phantasie können Sie sich vorstellen, das ein 'onMouseOver' natürlich gegen ein 'onClick' ausgetauscht werden könnte.
Die anderen Event-Handler lernen Sie später kennen:
 einblenden
einige Demos zum Bildtausch
1 Auslösung der Tauschaktion am Grafik-Objekt
Sie können ein Bild gegen ein anderes austauschen. Dabei wird entweder eine sichtbare Grafik gegen eine andere sichtbare Grafik getauscht, oder sie lassen eine Grafik 'erscheinen' weil sie eine vorher nicht sichtbare Grafik (transparentes Bild) gegen eine sichtbare austauschen.
 
|
Beispiel 1 für einen 'sichtbaren Bildtausch'
Grafik links mit der Maus überfahren
|
|
Beispiel 2 für einen 'unsichtbaren Bildtausch'
Zum Auslösen der Aktion die zu Beginn nicht sichtbare Grafik mit der Maus überfahren (hier wird zuerst nur ein transparentes Image angezeigt). |
2 Auslösung der Tauschaktion an einem anderen Ort
Sie können die MouseOver-Aktion für eine Grafik auch an einer anderen Position innerhalb ihrer Seite auslösen, nicht unbedingt nur an der Grafik selbst. Dazu steht hier z.B. Der Textlink mit der MouseOver-Anweisung an einer anderen Stelle als die zu tauschende Grafik.
3 Auslösung einer Tauschaktion + Aktion beim Klicken
Hier der übliche Einsatz. Beim Überfahren mit der Maus wird eine Grafik getauscht. So wird das z.B. in einem Menü eingesetzt. Hier verbirgt sich nicht nur eine MouseOver-Anweisung, sondern die Grafik dient wie man erwartet auch noch als Verweisfläche für einen aktiven Link.
|
Grafik als Verweis
Mouseover für Info
klicken verweist zur Seite
|
|
Grafik als Verweis
Mouseover für Info
klicken löst Aktion aus
|
4 Tauschaktion in Bezug auf 1 Grafik, Auslösung an mehreren Orten
Die Anweisungen für zu tauschende Grafiken können sich auch jedesmal auf ein und dasselbe Objekt beziehen. Die Tauschaktion wird hier ausgelöst durch 'onMouseOver'. Für alle Links wird bei MouseOut immer wieder die Ursprungsgrafik angezeigt.
(Dieses Beispiel finden Sie auch als Download auf der Web-Toolbox)
5 Tauschaktion in Bezug auf 1 Grafik, MouseOut + MouseOver an getrennten Orten
Die Anweisungen für zu tauschende Grafiken können sich auch jedesmal auf ein und dasselbe Objekt beziehen. Die Tauschaktion wird hier ausgelöst durch onMouseOver. Ein onMouseOut gibts hier nicht.
|
Home • JavaScript • Demos Event-Handler
Zur Webseite Geilenkirchen
