Change Image On Mouse Over (Rollover effect)

You Must Have seen many sites show a image then it changes its colour or image this is due to this rollover effect. Actually In This Effect There Are Two Images 1st image and 2nd image in which 1st changes to 2nd and on mouseout 2nd to 1st.

Demo- Place Your Mouse Over The Image To See effect-

Isn't It Amazing SO Lets Talk How To Add This Effect-

NEW WAY-

Make Some Changes & Get Widget!

Link URL:
First Image URL:
Second Image URL:
First Image URL AGAIN:

CODE-

<a href="URL"><img src="1st Image Url" onmouseover="this.src='2nd URL'" onmouseout="this.src="URL"" /></a>

Old Way-

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

How To Customize It-

1. URL ADDRESS- This The The Link When Someone clicks the image.
2. URL OF FIRST IMAGE GOES HERE- The 1st image url.
3. URL OF SECONG IMAGE GOES HERE- The 2nd image url

Now You Have Successfully Created A Rollover Effect.