Einsatzbereiche für Bildwechsel
    


WWW.WEB-TOOLBOX.NET

ZURÜCK SITEMAP  

 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.



   Zunächst einige Demos zu verschiedenen Anwendungen

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.


name für dieses Bild = foto1name für dieses Bild = foto1


Beispiel 1 für einen 'sichtbaren Bildtausch'
Grafik links mit der Maus überfahren
name für dieses Bild = foto 2
Beispiel 2 für einen 'unsichtbaren Bildtausch'
Zum Auslösen der Aktion die Grafik links der Maus überfahren (hier wird zuerst nur ein transparentes Image angezeigt)


Sie können den MouseOver-Effekt 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 das zu tauschende Objekt.

name für dieses Bild = grafik01

Zur Webseite Geilenkirchen

MouseOver für eine Vorschau
klicken verweist zur Seite
name für dieses Bild = grafik02

Aufgabe: 3 x 8 = ?

Lösung anzeigen

Mouseover zeigt die Lösung an


Hier der übliche Einsatz. beim Überfahren mit der Maus wird eine Grafik getauscht. Das, was sie z.B. in einem Menü einsetzen würden. 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.

name für dieses Bild = grafik03


Bild als Verweis

Mouseover für Info
klicken verweist zur Seite
Name für dieses Bild = grafik06

Bild als Verweis

Mouseover für Info
klicken löst Aktion aus



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.


Postleitzahlengebiet 0
Postleitzahlengebiet 1
Postleitzahlengebiet 2
Postleitzahlengebiet 3
Postleitzahlengebiet 4
Postleitzahlengebiet 5
Postleitzahlengebiet 6
Postleitzahlengebiet 7
Postleitzahlengebiet 8
Postleitzahlengebiet 9



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.

Ventilator ein   onMouseOver="hiLite('van','van02')"

Ventilator aus   onMouseOver="hiLite('van','van01')"






NACH OBEN