Advanced Search

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

Expand | Embed | Plain Text

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.