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/AVvXsEgpc8rJoyGxnWyCuZ2EfVVd_AFnmtUULJPmCJb8mOiXYLOq7wUVnIB42Vecv7Ivh8xIbuGtAI4oyzdZKxEemR997T_UioxrVUdhi9lAjA9h8yQmWgKsmYFnIdCONELhYys2VrH4COc3bNA/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSErOubF06inWxJp9nfo8yVvVBa1dBMr_ZQoUjHj_1cH5ZnV0CbbZRYM4J6b9YXP8Fd0MTJCDKiCW0E-XsqelrXJM35cSYMr2SL5wxZIGGZ8RfRFGwF3SqqHEns4HdYgfELVZCsGCyRJk/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpc8rJoyGxnWyCuZ2EfVVd_AFnmtUULJPmCJb8mOiXYLOq7wUVnIB42Vecv7Ivh8xIbuGtAI4oyzdZKxEemR997T_UioxrVUdhi9lAjA9h8yQmWgKsmYFnIdCONELhYys2VrH4COc3bNA/'" /></a>

RESULT :

Loading...