This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!

Untitled

By: thetenfold on Aug 2nd, 2013  |  syntax: None  |  size: 2.06 KB  |  views: 29  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta charset="UTF-8">
  6. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  7.  
  8. <title>Image Match Game</title>
  9.  
  10. <script>
  11.  
  12. var dest_url = 'http://www.edudemic.com/wp-content/uploads/2012/03/a_winner_is_you_1024.jpg';
  13.  
  14. // --------------------------------------------------
  15.  
  16. window.addEventListener('load', function (event) {
  17.  
  18.     var imgs = document.getElementById('match-holder').getElementsByTagName('img'),
  19.         last, i;
  20.  
  21.     function handle(event) {
  22.         var img = event.target;
  23.         if (!last) {
  24.             last = img;
  25.         } else if (last.className === img.className && last.src !== img.src) {
  26.             img.parentNode.className = 'section hidden';
  27.  
  28.             if (document.getElementsByClassName('shown').length === 0) {
  29.                 location.href = dest_url;
  30.             }
  31.         } else {
  32.             last = null;
  33.         }
  34.     }
  35.  
  36.     for (i = 0; i < imgs.length; i += 1) {
  37.         imgs[i].addEventListener('click', handle, false);
  38.     }
  39.  
  40. }, false);
  41.  
  42. </script>
  43.  
  44. <style type="text/css">
  45.  
  46. body {
  47.   background-color: #EEEEEE;
  48.   margin: 0;
  49. }
  50.  
  51. #match-holder {
  52.     margin: 100px auto;
  53.     width: 50%;
  54. }
  55.  
  56. .section {
  57.     margin: 50px auto;
  58. }
  59.  
  60. .shown {
  61.     display: block;
  62. }
  63.  
  64. .hidden {
  65.     display: none;
  66. }
  67.  
  68. .section img {
  69.     max-width: 320px;
  70.     max-height: 180px;
  71. }
  72.  
  73. .section img:nth-child(2) {
  74.     float: right;
  75. }
  76.  
  77. </style>
  78.  
  79. </head>
  80. <body>
  81.  
  82. <div id="match-holder">
  83.     <div class="section shown">
  84.         <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
  85.         <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
  86.     </div>
  87.     <div class="section shown">
  88.         <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
  89.         <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
  90.     </div>
  91. <div>
  92.  
  93. </body>
  94. </html>
clone this paste RAW Paste Data