Return to Snippet

Revision: 5476
at March 11, 2008 08:29 by hellion


Updated Code
<html>
<head>
    <script type="text/javascript">
	oHW = {

		myimgs : new Array(),
		reimgs : new Array(),
		oId : '',
		preMontar : function() {
			for (v=0; v<this.preMontar.arguments.length; v++){
				this.myimgs[v] = new Image();
				this.myimgs[v].src = this.preMontar.arguments[v];
			}
		},
		Cambiar : function(myid,n) {
			this.myimgs[myid] = document.getElementById(myid).src;
			this.oId = myid;
			document.getElementById(myid).src = n;
		},
		Restore : function() {
			document.getElementById(this.oId).src = this.myimgs[this.oId];
			this.oId = '';    
		}
		
	} // ..	
	</script>
</head>

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

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn1','img1_on.jpg')"><img border="0" id="mn1" src="img1.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn2','img2_on.jpg')"><img border="0" id="mn2" src="img2.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn3','img3_on.jpg')"><img border="0" id="mn3" src="img3.jpg" alt="" /></a>


</body>
</html>

Revision: 5475
at March 11, 2008 08:28 by hellion


Updated Code
<html>
<head>
    <script type="text/javascript">
	oHW = {

	myimgs : new Array(),
	reimgs : new Array(),
	oId : '',
	preMontar : function() {
		for (v=0; v<this.preMontar.arguments.length; v++){
			this.myimgs[v] = new Image();
			this.myimgs[v].src = this.preMontar.arguments[v];
		}
	},
	Cambiar : function(myid,n) {
		this.myimgs[myid] = document.getElementById(myid).src;
		this.oId = myid;
		document.getElementById(myid).src = n;
	},
	Restore : function() {
		document.getElementById(this.oId).src = this.myimgs[this.oId];
		this.oId = '';    
	}
		
	} // ..	
	</script>
</head>

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

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn1','img1_on.jpg')"><img border="0" id="mn1" src="img1.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn2','img2_on.jpg')"><img border="0" id="mn2" src="img2.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn3','img3_on.jpg')"><img border="0" id="mn3" src="img3.jpg" alt="" /></a>


</body>
</html>

Revision: 5474
at March 11, 2008 08:27 by hellion


Updated Code
<html>
<head>
    <script type="text/javascript">
	oHW = {

		myimgs : new Array(),
		reimgs : new Array(),
		oId : '',
		preMontar : function() {
			for (v=0; v<this.preMontar.arguments.length; v++){
				this.myimgs[v] = new Image();
				this.myimgs[v].src = this.preMontar.arguments[v];
			}
		},
		Cambiar : function(myid,n) {
			this.myimgs[myid] = document.getElementById(myid).src;
			this.oId = myid;
			document.getElementById(myid).src = n;
		},
		Restore : function() {
			document.getElementById(this.oId).src = this.myimgs[this.oId];
			this.oId = '';    
		}
		
	} // ..	
	</script>
</head>

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

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn1','img1_on.jpg')"><img border="0" id="mn1" src="img1.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn2','img2_on.jpg')"><img border="0" id="mn2" src="img2.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn3','img3_on.jpg')"><img border="0" id="mn3" src="img3.jpg" alt="" /></a>


</body>
</html>

Revision: 5473
at March 11, 2008 08:25 by hellion


Updated Code
<html>
<head>
    <script type="text/javascript">
		oHW = {

		    myimgs : new Array(),
		    reimgs : new Array(),
		    oId : '',
		    preMontar : function() {
		        for (v=0; v<this.preMontar.arguments.length; v++){
		            this.myimgs[v] = new Image();
		            this.myimgs[v].src = this.preMontar.arguments[v];
		        }
		    },
		    Cambiar : function(myid,n) {
		        this.myimgs[myid] = document.getElementById(myid).src;
		        this.oId = myid;
		        document.getElementById(myid).src = n;
		    },
		    Restore : function() {
		        document.getElementById(this.oId).src = this.myimgs[this.oId];
		        this.oId = '';    
		    }
		    
		} // ..	
	</script>
</head>

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

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mnind','img1_on.jpg')"><img border="0" id="mnind" src="img1.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mnco','img2_on.jpg')"><img border="0" id="mnco" src="img2.jpg" alt="" /></a>

<a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mnad','img3_on.jpg')"><img border="0" id="mnad" src="img3.jpg" alt="" /></a>


</body>
</html>

Revision: 5472
at March 11, 2008 06:40 by hellion


Initial Code
oHW = {

    myimgs : new Array(),
    reimgs : new Array(),
    oId : '',
    preMontar : function() {
        for (v=0; v<this.preMontar.arguments.length; v++){
            this.myimgs[v] = new Image();
            this.myimgs[v].src = this.preMontar.arguments[v];
        }
    },
    Cambiar : function(myid,n) {
        this.myimgs[myid] = document.getElementById(myid).src;
        this.oId = myid;
        document.getElementById(myid).src = n;
    },
    Restore : function() {
        document.getElementById(this.oId).src = this.myimgs[this.oId];
        this.oId = '';    
    }
    
} // ..

// ------------------------------
// author Velizar Nenov
// ------------------------------

Initial URL

                                

Initial Description
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

Initial Title
Javascript image preload object

Initial Tags
javascript, image, function

Initial Language
JavaScript