Advanced Search

Change other image on mouseover

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

Expand | Embed | Plain Text

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.