advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

Hanek on 12/03/07


Tagged

DOM rollover


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

basicmagic
sbbath


Image Rollover (DOM)

Published in: JavaScript 

Oh so sweet. A big thanks to Chris Poole for this one.

Plain TextExpand 
  1. >>>>>>>>>>>>> STEP 1 : Add to bottom of page, just above closing body tag  <<<<<<<<<<<<<
  2.  
  3. <script type="text/javascript" src="scripts/chrisdomroll.js"></script>
  4.  
  5. /****************************************************
  6. * DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
  7. * Script featured on http://www.dynamicdrive.com
  8. * Keep this notice intact to use it :-)
  9. ****************************************************/
  10.  
  11. </script>
  12.  
  13.  
  14.  
  15.  
  16. >>>>>>>>>>>>> STEP 2 : Create file : chrisdomroll.js  <<<<<<<<<<<<<<<<<<<<<<
  17.  
  18. //=====================================================================
  19. //  DOM Image Rollover v3 (hover)
  20. //
  21. //  Demo: http://chrispoole.com/scripts/dom_image_rollover_hover
  22. //  Script featured on: Dynamic Drive (http://www.dynamicdrive.com)
  23. //=====================================================================
  24. //  copyright Chris Poole
  25. //  http://chrispoole.com
  26. //  This software is licensed under the MIT License 
  27. //  <http://opensource.org/licenses/mit-license.php>
  28. //=====================================================================
  29.  
  30. function domRollover() {
  31. 	if (navigator.userAgent.match(/Opera (\S+)/)) {
  32. 		var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
  33. 	}
  34. 	if (!document.getElementById||operaVersion <7) return;
  35. 	var imgarr=document.getElementsByTagName('img');
  36. 	var imgPreload=new Array();
  37. 	var imgSrc=new Array();
  38. 	var imgClass=new Array();
  39. 	for (i=0;i<imgarr.length;i++){
  40. 		if (imgarr[i].className.indexOf('domroll')!=-1){
  41. 			imgSrc[i]=imgarr[i].getAttribute('src');
  42. 			imgClass[i]=imgarr[i].className;
  43. 			imgPreload[i]=new Image();
  44. 			if (imgClass[i].match(/domroll (\S+)/)) {
  45. 				imgPreload[i].src = imgClass[i].match(/domroll (\S+)/)[1]
  46. 			}
  47. 			imgarr[i].setAttribute('xsrc', imgSrc[i]);
  48. 			imgarr[i].onmouseover=function(){
  49. 				this.setAttribute('src',this.className.match(/domroll (\S+)/)[1])
  50. 			}
  51. 			imgarr[i].onmouseout=function(){
  52. 				this.setAttribute('src',this.getAttribute('xsrc'))
  53. 			}
  54. 		}
  55. 	}
  56. }
  57. domRollover();
  58.  
  59.  
  60.  
  61.  
  62. >>>>>>>>>>> STEP 3 (retain class="domroll space imgName.jpg/gif") <<<<<<<<<<
  63.  
  64. <img src="original.jpg" class="domroll hover.jpg" />

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: sbbath on December 9, 2007

that is just too much code for a simple rollover that would be easier in css, none the less, it's still good

You need to login to post a comment.