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.

  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.