JavaScript - Schritt für Schritt

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.