 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 (mit Array)
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 auf 14 separaten Beispielseiten 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)
Für die verwendeten Grafiken wird ein Register (Array) mit dem Namen 'AlleBaelle' angelegt. Die Grafiken werden dort abgelegt und bei Bedarf entnommen.
Die Notierungen im Head-Bereich des HTML-Dokuments für den Array und die Funktion.
<script type="text/javascript" language="JavaScript">
<!--
var AlleBaelle = new Array();
AlleBaelle[0] = new Image();
AlleBaelle[0].src = "baelle.jpg";
AlleBaelle[1] = new Image();
AlleBaelle[1].src = "fussball.jpg";
AlleBaelle[2] = new Image();
AlleBaelle[2].src = "volleyball.jpg";
AlleBaelle[3] = new Image();
AlleBaelle[3].src = "tennisball.jpg";
function Bildwechsel(Bildname,Zahl)
{
window.document.images[Bildname].src = AlleBaelle[Zahl].src;
}
//-->
</script>
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 • JavaScript • Mouseover Erklärung 1
Erklärung
DOWNLOAD