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.
First, put this code between the <head> and </head> of your html page:
loadImage1 = new Image();
loadImage1.src = “[YOUR SECOND IMAGE HERE]“;
staticImage1 = new Image();
staticImage1.src = “[YOUR FIRST IMAGE HERE]“;
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!
Boohla! Haha! Bongga Ba?
Image credits: JayDProductions & Don Trivino