grinyam

imageGuess

Jan 22nd, 2016
311
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title> Image Guess</title>
  6.     <style>
  7.     body { margin: 20px; }
  8.     img { margin: 20px; }
  9.     </style>
  10.     <script>
  11.     window.onload = init;
  12.     function init() {
  13.         var images = document.getElementsByTagName ("img");
  14.         for (var i = 0; i < images.length; i++) {
  15.             images[i].onclick = showAnswer;
  16.         }
  17.     }
  18.     function showAnswer(eventObj) {
  19.         var image = eventObj.target;
  20.         var name = image.id;
  21.         name = name + ".jpg";
  22.         image.src = name;
  23.         nameId = image.id; //создание глобальной функции для отсебятины
  24.         setTimeout(hideAnswer, 3000);
  25.     }
  26. //дальше отсебятина
  27.     function hideAnswer() {
  28.         var image = document.getElementById(nameId);   
  29.         var name = image.id;
  30.         name = name + "blur.jpg";      
  31.         image.src = name;
  32.     }
  33.     </script>
  34. </head>
  35. <body>
  36.     <img id="zero" src="zeroblur.jpg">
  37.     <img id="one" src="oneblur.jpg">
  38.     <img id="two" src="twoblur.jpg">
  39.     <img id="three" src="threeblur.jpg">
  40.     <img id="four" src="fourblur.jpg">
  41.     <img id="five" src="fiveblur.jpg">
  42. </body>
  43. </html>
Advertisement
Add Comment
Please, Sign In to add comment