How to Create A Rollover Image Effect (change image on mouseover)

The change result is one during which a picture net object changes (swaps itself) on mouse over to a different net object (called rollovers) and reverts back to the initial image on mouse out. change pictures square measure preloaded into the page once it's loading, this ensures that the rollovers square measure displayed quickly. The onMouseOver and onMouseOut attributes of the link tag square measure accustomed create this purposeful.

Demo:  Place your mouse over the image below to envision its change result

Making Rollover Effect Image

You have the following code:

<a href="URL ADDRESS"><img src="First image URL is here" onmouseover="this.src='Second image URL is here'" onmouseout="this.src='First image URL is here'" /></a>

Change the colored texts as it follows:

Step 1. URL ADDRESS

This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.pcdry.com

Step 2. LINK OF THE FIRST IMAGE GOES HERE

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

Step 3. URL OF THE SECOND PICTURE GOES HERE

Replace the text in blue with the URL of the image that may seem once the pointer hovers over it.

Now you can paste your picture inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.

You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.

Thanks for reading