How To Change Image On Mouse Hover via Javascript

Change Image On Mouse Hover Effect

April 24th, 2012

By Jeff Alagar

Change Image On Mouse Hover Effect –Do you want to learn how to change an image when a mouse points on it without having to click? Here’s how.

Last night, my friends decided to make a .GIF of a photo. While GIF files don’t stop looping and is changing fast, our friend Don Trivino decided to make an effect for it instead… to have the photo changed once the mouse goes over it.

Wanna know how to do it too? This effect will use Javascript. You might need to edit your html head for this, just as I did! Haha! Because my friend is Bongga!

First, put this code between the <head> and </head> of your html page:

<SCRIPT LANGUAGE=”JavaScript”>
loadImage1 = new Image();
loadImage1.src = “[YOUR SECOND IMAGE HERE]“;
staticImage1 = new Image();
staticImage1.src = “[YOUR FIRST IMAGE HERE]“;
</script>

Then, insert this code anywhere you want your image to appear:

<a href=”OPTIONAL: IMAGE LINK HERE]” onMouseOver=”image1.src=loadImage1.src;” onMouseOut=”image1.src=staticImage1.src;”>
<img name=”image1″ src=”[YOUR FIRST IMAGE HERE]” border=0></a>

And VOILA, you’re done! Take a look at my friend’s work using the Image Change Hover effect. Put your mouse pointer on the photo, and surprise!