Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Apr 19th, 2013  |  syntax: None  |  size: 2.43 KB  |  views: 25  |  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. <style type="text/css">
  2.  
  3. ul {
  4.     list-style-type:none;
  5. }
  6.  
  7. </style>
  8.  
  9. <body>
  10.  
  11. <div id="slideShow">
  12.  
  13.     <ul>
  14.         <li>
  15.             <img src="stockboat.png" alt="Steam Boat" id="boat" />
  16.         </li>  
  17.     </ul>
  18.  
  19. </div>
  20.  
  21. <script type="text/javascript" src="getElementsByClassName.js"></script>
  22. <script type="text/javascript">
  23.  
  24.     var image = document.getElementsByTagName('img');
  25.  
  26.     for (i = 0, ii = image.length; i < ii; i++)  {
  27.         image[i].style.opacity = "0.5";
  28.         image[i].addEventListener('mouseover', imageIn, 'false');
  29.         image[i].addEventListener('mouseout', imageOut, 'false');  
  30.     }
  31.  
  32.     function imageIn() {
  33.         image[i].style.opacity = "1";  
  34.     }
  35.  
  36.     function imageOut() {
  37.         image[i].style.opacity = "0.5";
  38.     }
  39. </script>
  40.  
  41. </body>
  42. </html>
  43.        
  44. function imageIn() {
  45.     this.style.opacity = "1";         // use "this" instead of image array
  46. }
  47.  
  48. function imageOut() {
  49.     this.style.opacity = "0.5";        // use "this" instead of image array
  50. }
  51.        
  52. image[i].addEventListener('mouseover'
  53.                          , (function(obj){return function(){imageIn(obj)};})(image[i])
  54.                          , 'false');
  55. image[i].addEventListener('mouseout'
  56.                          , (function(obj){return function(){imageOut(obj)};})(image[i])
  57.                          , 'false');
  58.        
  59. function imageIn(obj) {          // added parameters "obj"
  60.     obj.style.opacity = "1";  
  61. }
  62.        
  63. window.addEventListener('load', function () {
  64.     . . . // Your code
  65. });
  66.        
  67. image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);
  68.        
  69. this.style.opacity = "1";
  70.        
  71. <style type="text/css">
  72.  
  73. ul {
  74.     list-style-type:none;
  75. }
  76.  
  77. </style>
  78.  
  79. <body>
  80.  
  81. <div id="slideShow">
  82.  
  83.     <ul>
  84.         <li>
  85.             <img src="http://placekitten.com/100/100" alt="Steam Boat" id="boat" />
  86.         </li>  
  87.         <li>
  88.             <img src="http://placekitten.com/200/100" alt="Steam Boat" id="boat" />
  89.         </li>  
  90.         <li>
  91.             <img src="http://placekitten.com/300/60" alt="Steam Boat" id="boat" />
  92.         </li>  
  93.     </ul>
  94.  
  95. </div>
  96.  
  97. <script type="text/javascript" src="jquery.js"></script>
  98. <script type="text/javascript">
  99.  
  100.     var image = document.getElementsByTagName('img');
  101.  
  102.     for (i = 0, ii = image.length; i < ii; i++)  {
  103.         image[i].style.opacity = "0.5";
  104.         $(image[i]).hover(function(){$(this).css({"opacity":"1.0"})},
  105.                           function(){$(this).css({"opacity":"0.5"})});
  106.     }
  107. </script>
  108.  
  109. </body>
  110. </html>
clone this paste RAW Paste Data