Advanced Search

Image Rollover (DOM)

/ Published in: JavaScript
Save to your folder(s)
Oh so sweet. A big thanks to Chris Poole for this one.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.