<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Guess</title> <style> body{ margin: 20px; } img { margin: 20px; } </style> <script> window.onload = init; function init(){ 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; } </script> </head> <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>