A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it.
To add a rollover effect to your images use the code below.
<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>
IMAGE-1-LINK : The original image link
IMAGE-2-LINK : The rollover image link
To get a good understand look at the example below.
CODE :
<a href="http://bloggertipandtrick.blogspot.com/"><img src="http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg" onmouseover="this.src='http://1.bp.blogspot.com/_ar9PeTUrwMY/Stfedv95ncI/AAAAAAAAAyo/qKWJMwsvNes/12396.jpg'" onmouseout="this.src='http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg'" /></a>
RESULT :
Plain and simple very helpful thanks!
Thanks much for this!
This is the most efficient explanation for a simple-to-implement rollover for use on Blogger that I've seen thus far.
I just used the code and it worked like a charm.
Dude how do I upload the photo?:|
Thanks
If I copy and paste the code into blogger then what do I do then.
Where do I paste this code ???
HELP ! !!! !
@Email:
Where did you put this code ??
Im new in blogger and I dont know where to paste the code !!
Thanx 4 your help =)
Go to your blog design and click "Header description" or any place that you want to paste the code in. Then a pop-up window will appear. Click "Edit H.T.M.L." and paste the code.
Thanks for the info. Saved me a lot of time.
Excellent, Marvellous. Good
Thanks! Clear and concise!
GREAT! Thanks!!!
Is there a way to make this work in the template? Everytime I paste it into the template and save it, it changes my " to ' and my ' to '.
So I end up with:
href='IMAGE-DESTINATION-URL'><img src='IMAGE-1-LINK' onmouseover='this.src='IMAGE-2-LINK'' onmouseout='this.src='IMAGE-1-LINK''
siple cede great work 😀
I have been looking everywhere for a simple rollover tute! This is fabulous! Thank you.
Great tip! I use it many times at my weblog: Like here: http://corrosphotoblog.blogspot.com/2011/08/doing-some-pp.html
Great help, extremely easy.
All the other sites out there make it sound much more complex.
Thanks!
I wish you could add icon pop up effects to blogger as well
Good post and explanation, but how to make this work on a menu on top, i have a menu with "buttons" which are pictures, the one on the right side where the "sidebar" is work with mouseover but the ones over the post dont work, do you know why?
THANK YOU SO MUCH! This was so simple instead of trying to edit a php file and custom style codes.