How To Create Rollover Images in Blogger

How To Create Rollover Images 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://howtoblogacademy.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0vs4fnrdkIyJ9DXLV8ssOtTixDSct1MQpMKzCK2K0sduiW4z2yk9quNI1MHpLdVyTSwbqy6WYemHpchnjkrdZg0NS0x8O90BdwZdZueNeQwskHnCg38zf79btxgMO4g5K3I8SmqPUaO8/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwCdQV1cHi-HQ6Syw9JIm65I_PI6hDiL_Y1zx5jf3ap7YMS9Ro3ls9xkB14ocdWXKmcZdT03Zeejc-K_TtDclD0h5iVpskfYKW0js6s6DwDgWNUHvmA1Z-7Uqg7OlSNDyrDfM7uifJFCc/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0vs4fnrdkIyJ9DXLV8ssOtTixDSct1MQpMKzCK2K0sduiW4z2yk9quNI1MHpLdVyTSwbqy6WYemHpchnjkrdZg0NS0x8O90BdwZdZueNeQwskHnCg38zf79btxgMO4g5K3I8SmqPUaO8/'" /></a>

RESULT :