Create A Rollover Image Effect(Changes Images On Mouseover)

The Rollover Image effect is one of the best option to make your Post or sidebar widget more attractive.This is a proven and and widely used trick to ensure that the blog gets enough visitors.This will also makes the post more attractive

You can insert this code in post or sidebar widgets were you want the effect to come online


In blogger to add this code to your blog post just switch   to HTML mode and then paste the edited code inside were you want to make the code appear


 <a href=”URL ADDRESS“><img src=”URL OF THE FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF THE SECOND IMAGE GOES HERE‘” onmouseout=”this.src=’URL OF THE FIRST IMAGE GOES HERE‘” /></a>


URL Address

This is the URL were users will be sent when clicking on image
Example :

URL of First Image 

Replace the Yellow text (two times) with that of the URL of your first image will be static before the hover over

URL of Second Image

Replace the Blue text with the URL of the second image that should come when the mouse point is over the image

About the author

Astro Joseph

Hey Guys, I'm Astro K Joseph, Founder and CEO of IPEE World from Kerala, India. I started this blog as a passion and it now empowering thousands of readers around the globe.Here I usually share stuff related to How To, Android, Windows, Facebook, WhatsApp, Blogging, etc.

Leave a Comment