 Bild tauschen bei MouseOver und Mouseout
Sie kennen diese Möglichkeit (unterstützt durch JavaScript) aus Navigationsleisten, deren Buttons ausgetauscht werden, sobald der Mauszeiger sich über ein Image bewegt wird.
Funktion für einen Bildtausch entwickeln
Ziel ist es, die Anweisungen für den Bildtausch in einer JavaScript-Funktion zusammen zu fassen. Das ist überall dort empfehlenswert, wenn ein Bildtausch innerhalb eines Projekts häufiger genutzt werden soll. Die für den Bildtausch notwendigen Angaben werden der Funktion beim Aufruf als Parameter übergeben
Ich versuche Ihnen hier die Anwendung folgender Event-Handler zu erklären:
Event-Handler onMouseOver (beim Überfahren des Elements mit der Maus)
Event-Handler onMouseOut (beim Verlassen des Elements mit der Maus)
Meine Erklärungen führen sie auf 14 HTML-Seiten Schritt für Schritt zum Ziel: Wie funktioniert ein Mouseover-Effekt. In welchen SChritten wurde die Funktion entwickelt. Die Tauschbilder sollen außerdem vorgeladen und in einem Array abgelegt werden.
 Erklärung im neuen Browserfenster ansehen
Vorschau
Fußball
Vollyball
Tennis
Das komplette Beispiel können Sie downloaden und eignet sich z.B. auch zur Verwendung im Unterricht. (Schrift für Projektion evtl in der CSS-Datei einstellen).
Zusätzlich gibt es im Download noch eine Übungsaufgabe:
Aufgabe im neuen Browserfenster ansehen
Gewünschter Effekt
Beim Überfahren eines Links mit der Maus soll ein Bild gegen ein anderes ausgetauscht werden. Hier benutze ich mehrere Fotos, die in einer Anwendung auf die Unterabteilungen in einem Sportverein hinweisen könnten.
Nach alten HTML-Konventionen sind MouseOver und Mouseout-Anweisungen innerhalb von Links erlaubt, also innerhalb der HTML-Tags <a> und <area>
Sie können oben rechts :
- eine umfangreiche Erklärung lesen,
- diese Erklärung herunterladen (ZIP incl. Bilder),
- oder den HTML-Code kopieren (Textdatei)
Verwendete Bilder (sind im Download enthalten)
   
(rechtsklicken)
|
Home
Erklärung 
DOWNLOAD 
ZURÜCK