15 August 2012

How to change image on mouse hover?

Advertisements

Earlier we have opacity effect for images you add to Blogger. Following we discuss the two easy codes to change an image on mouse hover(rollover). When a hover mouse pointer image A will change to Image B. This effect can be seen on most websites.

Following are the codes and demos:

Change image on mouse hover without link

Copy and paste following code to Edit HTML section of post, template or gadgets section of your blog.

<img height="100" onmouseout="this.src='Image 1 URL'" onmouseover="this.src='Image 2 URL'" src="Image 1 URL" width="100" />

Change image URL's accordingly.




Change image on mouse hover with link

Copy and paste following code to Edit HTML section of post, template or gadgets section of your blog.

<a href="Targeted URL"><img src="Image 1 URL" onmouseover="this.src='Image 2 URL'" onmouseout="this.src='Image 1 URL'" /></a>

Change image URL's accordingly. Targeted URl means any link where you want to go when user clicks on image.



Don't forget to subscribe for more upcoming tricks n tips.

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More