O'Reilly logo

JavaScript - Schritt für Schritt by Steve Suehring

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

267
Kapitel 13
Arbeiten mit Bildern
in JavaScript
In diesem Kapitel:
Mit Image-Rollover arbeiten 268
Bilder vorab laden 275
Mit Diashows arbeiten 277
Mit Imagemaps arbeiten 282
Übungen 286
268
Kapitel 13: Arbeiten mit Bildern in JavaScript
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
sowohl die neuen als auch die alten Methoden für das Erstellen von Rollover-Bildern mit JavaScript zu
verstehen
Bilder mithilfe von JavaScript vorab zu laden
eine Diashow zu erstellen
Imagemaps mithilfe von JavaScript zu erweitern
Mit Image-Rollover arbeiten
Der Begriff Image-Rollover bezieht sich auf das Ändern eines Bilds, wenn der Benutzer den Mauszeiger
darüber führt, um eine visuelle Rückmeldung zur Mausposition auf dem Bildschirm zu liefern. Weil diese
Technik aber größtenteils durch CSS-basierte Lösungen verdrängt wurde und dies ein JavaScript-Buch ist,
zeige ich hier nur die JavaScript-Methoden für das Erstellen von Rollovern. Es schadet nichts, wenn Sie
wissen, wie JavaScript-basierte Rollover funktionieren, selbst wenn Sie sie später mit CSS erstellen.
Rollover nutzen bestimmte Ereignisse, die sich auf Mauszeigerbewegungen auf einem Computer beziehen,
und zwar hauptsächlich mouseover und mouseout.
Ein einfaches Rollover
Die Platzierung von mouseover- und mouseout-Ereignishandlern innerhalb des img-Tags erzeugt den
Rollover-Effekt. Die Handler zeigen Bilder an, die sich nur leicht voneinander unterscheiden. Das folgende
HTML erzeugt einen Rollover-Effekt mithilfe des alten DOM-Modells zur Ereignisbehandlung:
<img id="home" name="img_home" src="box1.png" alt="Home"
mouseover="window.document.img_home.src='box2.png'"
mouseout="window.document.img_home.src='box1.png'">
Die wichtigsten Teile dieses img-Tags sind der Name (img_home), die mouseover- und mouseout-Ereignisse
sowie der Code, der beim Auslösen dieser Ereignisse ausgeführt wird. Über den Namen des Tags können Sie
leicht auf das Bild über den Aufruf des window.document-Objekts zugreifen, während die mouseover- und
mouseout-Ereignisse für die Aktion zuständig sind. Wenn Sie eine derartige Seite im Webbrowser öffnen,
lädt der obige Code das Bild namens box1.png, wie es in Abbildung 13.1 zu sehen ist.
Abbildung 13.1 Das anfängliche Laden der Grafik box1.png
über eine Webseite
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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required