Create A Rollover Image Effect - Change Image on Mouseover

Create A Rollover Image Effect - Change Image on Mouse Hover 

The rollover image effect is mostly used in a website or even in blogger designing. So how this effect works? When the mouse cursor hover (called mouseover) the default image, that image will change to a new image (called rollover) and reverts back to the original image on mouse out (not hovering). 

In simple explanation, there are two images and one image is visible which is the default/original and the second image is hidden which will be shown when the mouse cursor is hovering the original image and the original image will be hidden. Rollover image is preloaded into the page when it is loading, to ensure that the rollovers are displayed quickly. In programming, we can compare it to True or False and If else statement, (something to think huh!?) Also Read: Automatically Add Image Border & Hover Effect o all Blogger Posts

DEMO: Place your mouse cursor on the image below, and see what happene (Don't be shoock!)

<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 Edit The Code?
1. URL ADDRESS
This is the address where somebody will be sent after clicking the image.
Example of URL ADDRESS: https://whowantstuffs.blogspot.com/

2. URL OF THE FIRST IMAGE GOES HERE
Replace that purple text "two times" with the URL address of the image which will appear before you hover over it.

3. URL OF THE SECOND IMAGE GOES HERE
Replace that orange text with the URL address of the image that will appear when the cursor hovers over it. Also Read: All In One SEO Pack for Blogger Blogspot

Now you can paste your image with roll over effect inside the blog gadget going to LAYOUT > click on ADD A GADGET > and select HTML/JAVASCRIPT. Paste the code inside the content of the popup window.

You can also add it inside your post or in page by going to NEW POST or NEW PAGE > switch to HTML tab and then paste the code.

Final Words
I hope that this method will help you to add more awesomeness in your blog designs. If you have questions or problem kindly type it in the comment area and we will discuss it, that's all enjoy!