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 {
.image-hover:hover {

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