Interspire Product Knowledge Base

Image swaps are now becoming routine for navigation on websites from all over the world. The effect is simple. When a user hovers their mouse cursor over the image, it changes to another image. When they stop hovering over the image, it changes back to its previous image.

For the sake of the article, here are my facts. I have 4 images. I have Dog.jpg, DogACTIVE.jpg, Cat.jpg, CatACTIVE.jpg. I want the images to change from Dog to DogACTIVE when a user hovers over the image with their mouse cursor and to change back to Dog when the user leaves the image with their cursor.

Here is one way to do that:

<a href="dog.html"><img src="http://www.yourwebsite.com/images/Dog.jpg" onMouseOver="this.src='http://www.yourwebsite.com/images/DogACTIVE.jpg'" onMouseOut="this.src='http://www.yourwebsite.com/images/Dog.jpg'" /></a>

<a href="cat.html" style="padding-left:10px;"><img src="http://www.yourwebsite.com/images/Cat.jpg" onMouseOver="this.src='http://www.yourwebsite.com/images/CatACTIVE.jpg'" onMouseOut="this.src='http://www.yourwebsite.com/images/Cat.jpg'" /></a>