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>