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.
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:
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!!.
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..
I would be happy to do a research and help you guys out..Happy reading.
The post Change image on mouse hover appeared first on iTechColumn.