
Mit Image-Rollover arbeiten
269
Wenn Sie den Mauszeiger über die Grafik führen, löst das mouseover-Ereignis aus und der folgende Code
ändert die Quelle der Grafik in box2.png:
window.document.img_home.src='box2.png'
Während sich der Mauszeiger über der Grafik befindet, wechselt das Bild in das in Abbildung 13.2 gezeigte,
in dem der Verlauf des Gradienten umgekehrt ist.
Abbildung 13.2 Die Grafik wechselt, wenn sich der
Mauszeiger darüber befindet
Wenn der Benutzer den Mauszeiger von der Graphik wegführt, wechselt das Bild zurück zu box1.png. Das
geschieht dank des mouseout-Ereignisses, das folgenden JavaScript-Code aufruft:
window.document.img_home.src='box1.png'
Modernes Rollover
Eine neuere Methode für das Erstellen von Rollovern mit JavaScript verwendet das DOM (Document
Object Model) und das onload-Ereignis des window-Objekts. (Mit dem onload-Ereignis des window-
Objekts hat sich Kapitel 11 ausführlich beschäftigt.) Wenn die Seite bei verwendetem DOM das onload-
Ereignis auslöst, ruft der onload-Handler eine JavaScript-Funktion auf, die die mouseover- und mouseout-
Ereignisse für alle Bilder im Dokument füllt.
Moderne Rollover verwenden
Obwohl ich die Verwendung von DOM mit onload als »modernes Rollover« bezeichne und es das Ziel von
unaufdringlichem Skripting erreicht, kann es etwas umständlich sein. Es ist auch nicht ganz so kompatibel,
wenn es über verschiedene Browser und Plattformen eingesetzt wird.
Der Pragmatiker in mir möchte sagen, dass die Verwendung des eben gezeigten Beispiels akzeptabel ist,
insbesondere wenn eine Webseite nur wenige Grafiken enthält, doch kommt es mir so vor, als würde ich
Ihnen damit eine schlechte Empfehlung geben. Deshalb überlasse ich Ihnen die Entscheidung, welches
Konzept besser für Sie geeignet ist. Wenn Sie sehr viele Grafiken haben, die den Rollover-Effekt erfordern,
bekommen Sie dieses zweite, jüngere Konzept, das eine generische Funktion verwendet, um Rollover-
Ereignisse zu behandeln, vielleicht besser in den Griff.