Change other image on mouseover


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <title>blubb</title>
  6. </head>
  7. <body>
  8. <div id="PageHeader">&nbsp;</div>
  9. <div id="PageContent">
  10. <img class="thumb" src="http://snipplr.com/bookcovers/bookjs1.jpg" alt="" />
  11. <img class="thumb" src="http://snipplr.com/bookcovers/book-django.jpg" alt="" />
  12. <img id="main_image" src="" alt="" />
  13. </div>
  14. <div id="PageFooter">
  15. &nbsp;
  16. </div>
  17.  
  18. <script type="text/javascript">
  19. // see http://snipplr.com/view/2950/getelementsbyclassname/
  20. // Implementation of the missing (nonexistant) 'document.getElementsByClassName()
  21. document.getElementsByClassName = function(cl) {
  22. var retnode = [];
  23. var myclass = new RegExp('\\b'+cl+'\\b');
  24. var elem = this.getElementsByTagName('*');
  25. for (var i = 0; i < elem.length; i++) {
  26. var classes = elem[i].className;
  27. if (myclass.test(classes)) retnode.push(elem[i]);
  28. }
  29. return retnode;
  30. };
  31.  
  32. function start(){
  33. var thumbs = document.getElementsByClassName('thumb');
  34. for (var i = 0; i < thumbs.length; i++) {
  35. thumbs[i].onmouseover = function(){
  36. document.getElementById('main_image').src = this.src;
  37. }
  38. }
  39.  
  40.  
  41. }
  42.  
  43. window.onload = start;
  44. </script>
  45. </body>
  46. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.