How To Add Rollover Effects in Blogger Blog

When mouse over on any image or web object, the object or image swaps itself and when mouse reverts, the image or web object came back to its first position this phenomenon called Rollover effects. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The on Mouse Over and on Mouse Out attributes of the link tag are used to make this functional.

we can use this tags in blogger also because it is so simple to add and does not effect on page loading time.
Demo: Place your mouse over the image below to see its rollover effect.

HOW TO MAKE ROLLOVER EFFECT

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

Replace the colored text as below

• URL ADDRESS

Replace URL ADDRESS  with your landing external or internal link.

• Replace orange colored text "URL OF THE FIRST IMAGE GOES HERE" with your image shows before hover.
• Replace orange colored text "URL OF THE SECOND IMAGE GOES HERE" with your image shows after hover.

Now save this code and paste it where you want to display hover/rollover images.