Erläuterungen zum Quellcode
(1) Neue Grafikobjekte für Highlight-Grafiken erzeugen
Für jede Grafik, die Sie dynamisch anzeigen möchten, müssen Sie eine Instanz des 
Grafik-Objekts erzeugen. Das gilt sowohl für die Grafiken, die zunächst in der HTML-Datei referenziert werden, als auch für diejenigen, die beim Überfahren mit der Maus dynamisch angezeigt werden sollen.
Dazu wird im 
Beispiel mit Anweisungen wie Normal1 = new Image(); eine Objektinstanz erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewählten Objektnamen, im ersten Fall Normal1, alle Eigenschaften des Objekts ansprechbar. Zunächst enthält das Objekt noch gar keine Daten. Mit der Anweisung Normal1.src = "button1a.gif"; wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen.
Wiederholen Sie die beiden beschriebenen Anweisungen für jede Grafikdatei, die von dynamischen Änderungen betroffen sein wird - und zwar sowohl für Grafiken, die im "Normalfall" angezeigt werden, als auch für Grafiken, die beim Darüberfahren mit der Maus dynamisch angezeigt werden. Vergeben Sie dabei jedesmal einen neuen Objektnamen.
(2) Funktion Bildwechsel() zum dynamischen Austauschen von Grafiken
Der bisherige Code im Beispiel wird beim Einlesen der HTML-Datei direkt ausgeführt, da er nicht in einer Funktion gebunden ist. Die Ausführung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt. Das, was am Bildschirm mit Hilfe von JavaScript passieren soll, nämlich das dynamische Austauschen eines Bildes, geschieht in der definierten Funktion Bildwechsel().
Die Funktion soll aufgerufen werden, wenn der Anwender mit der Maus über einen grafischen Verweis fährt, und wenn er den Verweisbereich mit der Maus wieder verläßt. Dazu benötigt die Funktion zwei Parameter: die wievielte Grafik in der Datei ausgetauscht werden soll (Parameter Bildnr), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Parameter Bildobjekt). Die Funktion kommt dann mit einer einzigen Anweisung aus. Diese Anweisung ersetzt das vorhandene Bild durch das neue. Beachten Sie hier den wichtigen Zusammenhang: das dynamische Ersetzen einer Grafik ist nur möglich, wenn für die neue Grafik zuvor eine Instanz des Grafikobjekts erzeugt wurde. Im Beispiel geschah dies ja ganz am Anfang des Scripts.
(3) Grafische Verweise mit Event-Handlern für Mausbewegungen des Anwenders
Damit der gewünschte Effekt zustande kommt, müssen Sie in der HTML-Datei Grafiken als Verweise definieren. Bei Buttons, die nebeneinander liegen sollen, empfiehlt sich eine blinde Tabelle, wie sie auch im Beispiel verwendet wird.
Im einleitenden Verweis-Tag werden die Event-Handler onMouseOver= und onMouseOut= notiert. Bei onMouseOver= (wenn der Anwender mit der Maus über den verweis-sensitiven Bereich, hier eine Grafik fährt) wird die im Script-Bereich definierte Funktion Bildwechsel() aufgerufen, ebenso bei onMouseOut= (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verläßt).
Beim Aufruf von Bildwechsel() werden jeweils die beiden benötigten Parameter übergeben. Zählen Sie dazu die referenzierten Grafikdateien in der HTML-Datei, aber fangen Sie bei 0 an zu zählen, d.h. 0 für die erste Grafik in der Datei, 1 für die zweite Grafik usw. Übergeben Sie den Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind in der gesamten HTML-Datei keine anderen als die dynamisch zu tauschenden Grafiken referenziert. Deshalb wird im ersten Fall 0 (erste Grafik der Datei) übergeben, im zweiten Fall 1 (zweite Grafik der Datei).
Beim zweiten Parameter übergeben Sie den Objektnamen für das gewünschte Grafikobjekt. Das ist einer der Namen, die Sie am Anfang des Script-Bereichs vergeben haben. Im Beispiel wird im ersten Fall z.B. Highlight1 bei onMouseover übergeben, und Normal1 bei onMouseout.
© 1997 
Stefan Münz, s.muenz@euromail.com
Kurzbeschreibung 
