Javascript image preload object


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

How to use:

1) < script type="text/javascript" src="path-to-file.js"...

2) < body onload="oHW.preMontar('img1_on.jpg','img2_on.jpg','img3_on.jpg');"...

3) < a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mnind','img1_on.jpg')"

Credentials:

Image Rollovers | flipping images with JavaScript onMouseOver || HTMLSource ]
http://www.yourhtmlsource.com/images/rollovers.html#theimageflip


Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. oHW = {
  5.  
  6. myimgs : new Array(),
  7. reimgs : new Array(),
  8. oId : '',
  9. preMontar : function() {
  10. for (v=0; v<this.preMontar.arguments.length; v++){
  11. this.myimgs[v] = new Image();
  12. this.myimgs[v].src = this.preMontar.arguments[v];
  13. }
  14. },
  15. Cambiar : function(myid,n) {
  16. this.myimgs[myid] = document.getElementById(myid).src;
  17. this.oId = myid;
  18. document.getElementById(myid).src = n;
  19. },
  20. Restore : function() {
  21. document.getElementById(this.oId).src = this.myimgs[this.oId];
  22. this.oId = '';
  23. }
  24.  
  25. } // ..
  26. </script>
  27. </head>
  28.  
  29. <body onload="oHW.preMontar('img1_on.jpg','img2_on.jpg','img3_on.jpg');">
  30.  
  31. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn1','img1_on.jpg')"><img border="0" id="mn1" src="img1.jpg" alt="" /></a>
  32.  
  33. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn2','img2_on.jpg')"><img border="0" id="mn2" src="img2.jpg" alt="" /></a>
  34.  
  35. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn3','img3_on.jpg')"><img border="0" id="mn3" src="img3.jpg" alt="" /></a>
  36.  
  37.  
  38. </body>
  39. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.