Bildwechsel 1
    
 Home • JavaScript • MouseOver-Funktion Beispiel   DOWNLOAD  Quellcode 

 Bild tauschen MouseOver-Funktion

Mit Hilfe einer JavaScript-Funktion soll ein Bild-Objekt ausgetauscht werden. Der Link kann ein Textverweis oder aber auch das Bild selbst sein. Ein Eventhandler leitet den Aufruf der Funktion ein.

onMouseOver / onMouseOut ruft eine JavaScript-Funktion zum Bildtausch auf

So soll das Ergebnis aussehen:

Beim Überfahren des Links wird das Bild-Objekt "foto1" durch ein anderes, im JavaScript-Bereich notiertes Image ersetzt. Bei MouseOut wird das ursprüngliche Image wieder angezeigt. Das Script kann auf einer Seite mehrfach verwendet werden.

1) Voraussetzung ist die Vergabe eines Namens für die Grafik
2) Im JavaScript-Block steht die Bilderliste + eine Funktion
3) Im Event-Handler ist ein Funktionsaufruf notiert
4) Bei einer Maus-Aktion wird durch den Event-Handler die Funktion aufgerufen


   Namen vergeben

Voraussetzung für eine gezielte Ansprache eines Objekts durch JavaScript ist die Vergabe eines Namens (oder einer ID). Nur wenn JavaScript die Grafik beim Namen nennen kann ist eindeutig, welches Objekt gemeint ist. Bei einer Mausaktion soll schließlich nicht irgendeine Grafik getauscht werden sondern das Oma-Bild.

<img name="foto1" src="oma.jpg" width="400" height="30" border="0" alt="">
Damit ist die erste Voraussetzung erfüllt. Nun die weiteren Schritte zur Vereinfachung von Bildtauschaktionen. Simpel dargestellt:
  • Eine Liste der Grafiken notieren, die von der Funktion genutzt werden
  • Sammlung von JavaScript-Anweisungen zum Bildtausch notieren

1) Voraussetzung ist die Vergabe eines Namens für die Grafik




   JavaScript-Notierungen im Head

Zuerst werden die (hier) 2 Grafiken bekannt gemacht und bekommen einen eindeutigen Namen. Zwei Grafiken, weil wir ja vor- und wieder zurück-tauschen wollen.

Tauschbild01a = new Image();
Tauschbild01a.src = "oma.jpg";     /* normale-Grafik */
Tauschbild01b = new Image();
Tauschbild01b.src = "opa.jpg";     /* Highlight-Grafik */

Darunter steht die Funktion Wechseln() zum Austauschen von Grafiken.

Beim Aufruf der Funktion Wechseln() wird erwartet, das 2 Informationen weiter gegeben werden. Der JavaScript-Profi würde sagen: Der Funktion Wechseln() müssen 2 Werte übergeben werden. Diese Informationen stehen innerhalb der Klammern und sind:
  1. Info darüber, für welches Objekt die Aktion ausgeführt werden soll
  2. Info darüber, welche Grafik dann angezeigt werden soll
<script type="text/javascript" language="JavaScript">
<!--

Tauschbild01a = new Image();
Tauschbild01a.src = "oma.jpg";     /* normale-Grafik */
Tauschbild01b = new Image();
Tauschbild01b.src = "opa.jpg";     /* Highlight-Grafik */


function Wechseln(Bildname,Tauschbildname)
{
document.images[Bildname].src = eval(Tauschbildname + ".src")
}

//-->
</script>

2) Im JavaScript-Block steht die Bilderliste und eine Funktion




    Arbeitsweise der Funktion

Wie die Funktion Wechseln(Bildname,Tauschbildname) arbeitet:

Die Funktion Wechseln() enthält Anweisungen zum Austauschen von Grafiken. Sie benötigt beim Aufruf 2 Angaben die als Parameter übergeben werden:

1. den Objektnamen der Grafik (Bildname)
2. Info zur Ermittlung der URL der neuen Grafik (Tauschbildname)

Der Austausch der Grafik geschieht nach folgender Anweisung:

Das Objekt mit dem Namen, der dir mit Bildname übergeben wurde hat nun eine neue Adresse. Werte zur Ermittlung der neuen Adreasse die Information aus, die dir mit Tauschbildname übergeben wurde.


Lassen sie mich die Anweisung einmal in meinen Worten ausdrücken:

documentimages[Bildname]src = eval(Tauschbildname + ".src")
Es gilt:

in diesem Dokument
für das Bildobjekt mit dem Namen Bildname
ist die Datenquelle (Source)

nun gleich (=)

das, was bei der der Auswertung aus der Information von Tauschbildname ermittelt wurde
(evaluate = werte aus)

Wenn die Funktion ihre Arbeit getan hat, könnte man das Ergebnis in Worten so ausdrücken: "Das Objekt mit dem Namen Grafik01 hat nun eine neue Adresse (Datenquelle), nämlich button01b.gif"





    Notierungen im BODY-Bereich

Für die zu tauschende Grafik (Oma) wurde bereits im <img>-Tag ein Name eingetragen mit: name="foto1"


Im Link werden die Eventhandler OnMouseOver bzw. OnMouseOut eingetragen mit denen die Funktion "Wechseln()" aufgerufen wird.

<a href="dateiname.htm"
OnMouseover = "Wechseln('foto1','Tauschbild01b')"
OnMouseout  = "Wechseln('foto1','Tauschbild01a')">

Das <img>-Tag für das Foto steht hier

</a>
Wie sie feststellen stehen in den Klammern 2 Informationen für die Funktion Wechseln(). Diese Informationen nennt man Übergabewerte. Die beiden Infos werden an die Funktion übergeben. Der erste Übergabewert wird benötigt um festzulegen auf welches Objekt die Aktion angewendet werden soll. Mit dem zweiten Übergabewert wird festgelegt, welche neue Grafik für den Tausch genutzt werden soll.

3) Im Event-Handler ist ein Funktionsaufruf mit Übergabewerten notiert.



   Was geschieht bei MouseOver?

Diese Anweisung soll befolgt werden: onMouseOver = "Wechseln('foto1','Tauschbild01b')"

Bei MouseOver wird die im Head-Bereich notierte Funktion 'Wechseln()' aufgerufen und dabei werden 2 Werte übergeben. Es handelt sich dabei um

a) den Namen für das Grafikobjekt (Name des Oma-Fotos)
b) Informationen über das neue Foto (Opa-Foto)

Das sind genau die Informationen, welche die JavaScript-Funktion 'Wechseln()' erwartet um die Tauschaktion durchführen zu können.

4) Bei einer Maus-Aktion wird durch den Event-Handler die Funktion aufgerufen




   Weitere Bilder einbinden

So soll das Ergebnis aussehen:

Beim Überfahren des Links wird das Bild-Objekt "foto1" durch ein anderes, im JavaScript-Bereich notiertes Image ersetzt. Bei MouseOut wird das ursprüngliche Image wieder angezeigt. Das Script kann auf einer Seite mehrfach verwendet werden.
Sollen innerhalb der Seite zusätzliche Bilder getauscht werden, muss für jedes dieser Bilder eingetragen werden, welches das MouseOver und MouseOut-Bild sein soll. Sie setzen also die Einträge nach den gleichen Schema fort:

Tauschbild01a = new Image();
Tauschbild01a.src = "oma.jpg";      /* normale-Grafik */
Tauschbild01b = new Image();
Tauschbild01b.src = "opa.jpg";      /* Highlight-Grafik */

Tauschbild02a = new Image();
Tauschbild02a.src = "onkel.jpg";    /* normale-Grafik */
Tauschbild02b = new Image();
Tauschbild02b.src = "tante.jpg";    /* Highlight-Grafik */

Tauschbild03a = new Image();
Tauschbild03a.src = "neffe.jpg";    /* normale-Grafik */
Tauschbild03b = new Image();
Tauschbild03b.src = "nichte.jpg";   /* Highlight-Grafik */



Das Onkel-Foto (das später mit dem Tante-Foto getauscht werden soll) erhält einen Namen zu Identifizierung. Der Name darf innerhalb der Seite nur einmal vergeben sein, muss sich also von den Anderen Namen unterscheiden.

<img name="foto2" src="onkel.jpg" width="400" height="30" border="0" alt="">
Die Anweisung im Link lautet dann:

<a href="dateiname.htm"
OnMouseover = "Wechseln('foto2','Tauschbild02b')"
OnMouseout  = "Wechseln('foto2','Tauschbild02a')">

IMG-Tag für das Foto steht hier

</a>



Den Quelltext zu diesem Beispiel finden sie ganz oben als Textdatei.

Zur Anpassung an ihre Anwendung tragen sie entsprechende Angaben ein:

Element    hier im Beispiel   ersetzen mit  
Tauschbild01 oma.jpg ihrem Dateinamen 
Tauschbild02 opa.jpg ihrem Dateinamen 
Objektname foto1 ihr Objektname





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).




Laden sie die ZIP-Datei meines Beispiels auf ihre Festplatte herunter und experimentieren ein wenig. Die Zip-Datei enthält alle benötigten Grafiken.