How to Create A Rollover Image Effect "Change image on mouseover"

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. URL

This is the URL/Link where somebody will be sent when clicks on the image.
Example, my blog URL/LINK: http://www.bloggerwidgetgenerators.com

2. IMG-1

Replace the red text (two times) with the URL address of the image which will appear before you hover over it.

3. IMG-2
Replace 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 :)

Add Comment

Quicker BD

How to make Rollover Effect Image