JavaScript-Programmierung von Kopf bis Fuß

412 Kapitel 9

setTimeout im Bilderrätsel einsetzen

window.onload = function() {

var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

}

};

function showAnswer(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + ".jpg";

image.src = name;

setTimeout(reblur, 2000, image);

}

function reblur(image) {

var name = image.id;

name = name + "blur.jpg";

image.src = name;

}

Das Bilderrätsel fertigstellen

Jetzt können wir unserem Bilderrätsel den letzten Schliff geben. Zwei Sekunden

nach Anzeige der scharfen Version soll wieder das weichgezeichnete Bild angezeigt

werden. Wie gerade gelernt, können wir dem Event-Handler beim Aufruf von

setTimeout ein zusätzliches Argument übergeben. Und das geht so:

In IE8 und früher unterstützt

setTimout keine zusätzlichen

Argumente.

Richtig gelesen. Für Benutzer von IE8 oder

früheren Versionen wird dieser Code nicht

funktionieren. Aber eigentlich sollten Sie IE8 auch

nicht für dieses Buch benutzen! Etwas später

in diesem Buch werden wir Ihnen trotzdem eine

Mglichkeit zeigen, diese Probleme auch für IE8

(und früher) in den Griff zu bekommen.

Dieser Codeabschnitt enthält

keine Änderungen …

Gleichzeitig mit der Anzeige des

scharfen Bilds wird setTimeout

aufgerufen, um ein Event zu erzeugen,

das in zwei Sekunden ausgelöst wird.

Wir benutzen reblur (siehe unten)

als Handler, übergeben ihm 2000

Millisekunden (2 Sekunden) und als

zusätzliches Argument das Bild, das

wieder unscharf werden soll.

Beim Aufruf dieses Handlers wird

jetzt das Bild mit übergeben.

Der Handler übernimmt ein Bild, holt

sich dessen ID und baut sich daraus

den Namen des weichgezeichneten

Bilds zusammen. Weisen wir der src-

Eigenschaft diesen Namen zu, wird

das scharfe Bild wieder gegen die

ursprüngliche Version ausgetauscht.