How to Create A Rollover Image Effect (Change image on MouseOver)

Image Rollover function or Effect is a function through which you can easily create an effect when mouse over an Image Web Object then this image changes or swaps to other image Web Object. When mouse out then original image came back. This effect is called Image Rollover Effect. Actually, this function is created by onMouseOver and onMouseOut attributes. By using this function you can make awesome webpages.

Demo: When Mouse Cursor goes over this Twitter Bird image then it will change to other small Twitter Bird image.

Creating Rollover Image Effect: 

Copy this code and paste in that post where you want to create a Rollover image effect:

<a href="TARGET URL ADDRESS"><img src="URL OF FIRST IMAGE " onmouseover="this.src='URL OF SECOND IMAGE '" onmouseout="this.src='URL OF FIRST IMAGE'" /></a>

Change the colored text with instructions given below:


1: TARGET URL ADDRESS
Here you need to write the URL Link where somebody goes after click on that image.
For example i want to send visitor to my Twitter account then i will enter my account Twitter Profile URL            www.twitter.com/AoABlogger


2: URL OF FIRST IMAGE
Replace this yellow colored text with the URL Link of the image that will appear in normal mode or when mouse cursor out.


3: URL OF SECOND IMAGE 
Replace this Blue colored text with URL Link of that image which will appear when mouse cursor goes over the image or mouse over the image .

That's it! You can create Rollover effect in every post by using this simple method.

Video Tutorial: