Interspire Product Knowledge Base

Would you like to...

Print this page Print this page

Email this page Email this page

Post a comment Post a comment

Subscribe me

Add to favorites Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Export to PDF

User Opinions (211 votes)

97% thumbs up 2% thumbs down

How would you rate this answer?



Thank you for rating this answer.

HTML Examples #3: How To Do An Image Swap

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>

Related Articles

No related articles were found.

Attachments

No attachments were found.

Powered by Interspire Knowledge Manager - World's #1 Best Selling FAQ and Knowledge Base Software