Here in this article we will discuss on an another topic is that the
rollover effect which is an image web object changes on mouse over to another web object "
called rollovers" and reverts back to the original object on mouse out. Rollover images are preloaded into the page when it is loading. So, rollover will be displayed quickly even without loading the images. its working based on the attributes of the link tag
onMouseOver and onMouseOut.
Also see : Add Flashing Christmas Lights in Blogger / Blogspot
Demo : Place your mouse over the image below to see its rollover effect.
How to make Rollover Effect Image
Here is an HTML code that you can use to make rollover effect image:
<a href="URL"><img src="IMG-1" onmouseover="this.src='IMG-2'" onmouseout="this.src='IMG-1'" /></a>
Change the colored texts as it follows:
1. URLThis is the URL/Link where somebody will be sent when clicks on the image.
Example, my blog URL/LINK:
http://www.bloggerwidgetgenerators.com2. IMG-1Replace the red text (two times) with the URL address of the image which will appear before you hover over it.
3. IMG-2Replace the text in blue with the url of the image that will appear when the cursor hovers over it.
That's it.
Now you can use this rollover image to your blog's sidebar or new post. To add this image in sidebar navigate to the
layout > Add a gadget > Choose HTML/Javascript form the list and paste the code inside in to show this widget in sidebar of your blog.
And to display this image to your new blog post, in your blog's post editor switch to the
HTML tab and then paste the code anywhere you would like to show and you're done.
If you have any questions about this tutorial feel free to comment below, i would love to answer your each questions. Thank You :)