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

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'”/>