MouseOver – Switch Image

[Total: 0    Average: 0/5]

This example is very striaght forward.

Body Code:

<a href="#" onmouseover='switchImages("on")' onmouseout='switchImages("off")'><img name="imagename" src="http://www.js-examples.com/js/pic1.gif" border="0" alt="Animated Mouse Over Image" height="40" width="40"></a>
<script>
// This creates an image object.
var preloadedImage1 = new Image();
// This tells the web browser to download this image now (rather than later).
    preloadedImage1.src="http://www.js-examples.com/js/pic2.gif";
	
// This creates an image object also.
var preloadedImage2 = new Image();
// This tells the web browser to download this image now (rather than later).
    preloadedImage2.src="http://www.js-examples.com/js/pic1.gif";
function switchImages(_onOff) {
if (_onOff=="on")
// This replaces the image in the object "preloadedImage" and puts
// a copy into the document image object that was defined up above
// with the "img" tag.
document.imagename.src=preloadedImage1.src;  
else
document.imagename.src=preloadedImage2.src;  

}
</script>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *