Sie sind hier � 401
Asynchron programmieren
function showAnswer(eventObj) {
var image = eventObj.target;
var name = image.id;
name = name + ".jpg";
image.src = name;
}
Die target-Eigenschaft enthält eine
Referenz auf das gerade angeklickte Bild.
Dann können wir die id-Eigenschaft des Objekts benutzen,
um an den Dateinamen des scharfen Bilds zu kommen.
Wie Sie sehen, entsprechen die Bild-IDs den Dateinamen der scharfen Versionen (ohne
das ».jpg«-Suffix). Wenn wir auf die ID zugreifen können, sollte es recht einfach sein, dem
Namen ein ».jpg« anzuhängen, um den passenden Dateinamen zu erzeugen. Danach
können wir der src-Eigenschaft den neuen Wert zuweisen:
Das Event-Objekt benutzen
<!doctype html>
...
<body>
<img id="zero" src="zeroblur.jpg">
<img id="one" src="oneblur.jpg">
<img id="two" src="twoblur.jpg">
<img id="three" src="threeblur.jpg">
<img id="four" src="fourblur.jpg">
<img id="five" src="fiveblur.jpg">
</body>
</html>
Jedes Bild hat eine ID, die zum Namen
des entsprechenden scharfen Bilds passt.
Die scharfe Version des Bilds mit der
ID »zero« ist also in »zero.jpg« zu
finden, das Bild für die ID »one« in
»one.jpg« usw.
Hier noch einmal der
HTML-Code
Jetzt wissen wir schon etwas mehr darüber, wie das Event-Objekt an den click-Handler
übergeben wird. Nun wollen wir sehen, wie wir die Informationen im Event-Objekt benutzen
können, um ein weichgezeichnetes Bild auf der Seite durch seine »scharfe« Version
austauschen zu können. Zunächst sehen wir uns den HTML-Code noch einmal an.
Und zum Schluss weisen wir der
src-Eigenschaft diesen Namen zu.
Immer wenn ein Bild angeklickt wird,
erhalten Sie ein Event-Objekt.
Sobald Sie die src-Eigenschaft des Bilds verändern,
holt sich der Browser das neue Bild und zeigt es
anstelle des weichgezeichneten Bilds in der Seite an.
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
