How to Change image on mouse over. How to change image on mouse hover for Blogger. This is a really cool trick which I learnt recently, and thought of sharing it with you guys.
A) Using CSS (Change the image on mouse 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:
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!!.
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..