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/AVvXsEj7elVlpAitmYQtzmn9ODy3z0sS9iScVJh9uge1WCIvlE-PDycJNwyk84F1qnrEaqWsj3ybgZqbFV7gV3QPps6FoG1-Uzv_iDDqNkYMjQiok1xKzdwFr557qxd5-ixuC0yQJYPV2XZLSpc/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQuDpr7R9W4R2Pd5q8A9quYQUlb5FGAgpsO6fuvfmxZt_WcoVAjexLk6on4K8S80HdAnrMm6uALkNZ3UBOaU4v1Fqc3SZEbzacDTqrbmMMuN0Bi86Bw3i0vL63JM-Rg40nmbINM-7LS0/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7elVlpAitmYQtzmn9ODy3z0sS9iScVJh9uge1WCIvlE-PDycJNwyk84F1qnrEaqWsj3ybgZqbFV7gV3QPps6FoG1-Uzv_iDDqNkYMjQiok1xKzdwFr557qxd5-ixuC0yQJYPV2XZLSpc/'" /></a>

RESULT :

Loading...