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

RESULT :