How to Change image on mouse over. How to change image on mouse hover for Blogger.

Change image on mouse hover

This is a really cool trick which I learnt recently, and thought of sharing it with you guys. 


You can actually change images on mouse over. This trick may be handy when you want to explain two types of pictures or tutorials in the same post. This can be used as a sidebar widget. This image change with mouse over can be brought up using two methods, one is using CSS and other is using simple JavaScript code.

A) Using CSS (Change the image on mouse hover) :

CSS Code:

.image-hover {
display:block;
background-image:url(http://first_image_url.jpg);
width:100px;
height:100px;
}
.image-hover:hover {
background-image:url(http://second_image_url.jpg);
}

Implementation in Blogger:


1. Go to HTML edit mode on Blogger.
2. Search for ]]></b:skin> 
3. Just above ]]></b:skin> Paste the CSS code shown above.
4. Place the following HTML code where ever you want the image to appear:

<a class=’image-hover’></a>

Note: the class name used in both the HTML part and CSS part should be the same.


B) This is the second method (EASY method for image change on mouse hover):

Where ever you want the image to appear and reappear with new a new image, place the following code:


<img src=’http://first_image_url.jpg’ onmouseover=”this.src=’http://second_image_url.jpg'” onmouseout=”this.src=’first_image_url.jpg'”/>

Save the widget or post, where the image has to appear. You are done!!.


LIVE DEMO:



Thanks for learning this tutorial. If anything is not working, please comment back, happy to help always.. I would like to see some new problems with these tricks as well.. :-) I would be happy to do a research and help you guys out..
Happy reading..

About The Author

Karan Vyas is the founder at itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.