Rollover Image Effect in HTML

Rollover Image Effect while mouse hover is an amazing effect which most of websites and blogs use.You can use this Hovering effect with any image on your website and blog. With this effect the image will change to another different image once you hover your cursor over it.

Here's a preview of a Rollover Image Effect 

 

>> Place your cursor over the image to see it change <<

 

You need to use following code to get Rollover Image Effect

<a href="Put target url here">
<img onmouseout="this.src='Put First url of image here'" 
onmouseover="this.src='Put Second url of image here'" 
src="Put First url of image here" /> </a>

Some Instructions :-

1) Put target url here :-

Put the target URL here (See Above Preview, The Image is clickable and you can place your sites url there)
Example:- www.ebloggertips.com


2) Put First url of image here :-

Put url for first image here
Example:- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5UEzylLBw_hptpiIDk9E2B13fdueec9Z3TcUlWaYaP0vdUjM98yEuUbJEB8GOmcGJAQwALroLh0p17k_OmggLDi15uBrZj8eo3b9j5JXZRao-3bZEoXpcMnfI_sVXfVAUbKCwPbS_cz29/s300/eblogger.png


3) Put Second url of image here :-

Put url for second image here
Example:- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbdh9dshkDUpwrep5XPuQhvaddpymGt5K1hs7oekYVdx08T1riceiJQFYBZLZ_skBwM6WvsC3ijxQTXiVaDw49UOZcBH2tKviXBO58HNIsWtlRnQcTMdOSE6jkmSgaEX77cjxkFJHCO64/s1600/Blogger+Tips-Logo+V1.png

This tutorial is very easy to use and you can have multiple cool effects on your website or blog, for more updates put your comments and suggestions below