Article | How to Add Rollover image in blogger

A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it.



To add a rollover effect to your images use the code below.

<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>

IMAGE-1-LINK : The original image link



IMAGE-2-LINK : The rollover image link



To get a good understand look at the example below.



CODE :

<a href="http://bloggertemplatestricks.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhFz6b1FqiXA1OEnxyhaRI9TY6-aTCoUIZ2rd4utLLAr8atL4CY4bmJJNwR8tF3dzhiKgFNUfhNFEiGZkKRW2KYlUGumgtgoAR2rS3fiE_5Btzv3cj6J9Kne2S2jWY5c7uV7rq7669X-w/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDATi6qjlKysyuKa_J_RP8DZQk23-eygwPkn5aZEJzdg1h3-SxjCzy-YcTwbDVEoOKqfY2WJvfx3CRHZ5WnBE094dPE0wvD7h1cCCuT5zSnbn6U-9MjSBD0LYPhuWzfV5hs5Lf6oLDCMs/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhFz6b1FqiXA1OEnxyhaRI9TY6-aTCoUIZ2rd4utLLAr8atL4CY4bmJJNwR8tF3dzhiKgFNUfhNFEiGZkKRW2KYlUGumgtgoAR2rS3fiE_5Btzv3cj6J9Kne2S2jWY5c7uV7rq7669X-w/'" /></a>

RESULT :

Loading...