Bildwechsel 1
    
WWW.WEB-TOOLBOX.NET
Quellcode   ZURÜCK SITEMAP  

 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.


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, Weiß jeder wer 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")
in diesem Dokument
gibt es ein Bildobjekt mit dem Namen Bildname
mit einer bestimmten Datenquelle (Source)

die ist nun (=)

das, was bei der der Auswertung aus der Information von Tauschbildname ermittelt wurde
(evaluate = wertete 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 werden kann.

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

IMG-Tag für das Foto steht hier

</a>
Wie sie feststellen stehen in den Klammern 2 Informationen für die Funktion Wechseln(), damit eindeutig festgelegt ist für welches Objekt die Aktion ausgeführt werden soll und welche neue Grafik für den Tausch genutzt werden soll.

3) Im Event-Handler ist ein Funktionsaufruf 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 (Namen des Oma-Fotos)
b) Informationen über das neue Foto (Opa-Foto)

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

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




   Weitere Bilder einbinden

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

NACH OBEN