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://bloggertipandtrick.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JSmUdopXNleQ2bH86GAHQqfbLOBrYbCsI6BQesF6f4F2eW9OKBEZUeJSE6UR-IFjO0o-OsgceGAjRIVokhJ6hMIcqkw32EF0GOBjf4rZgpd9E5FZHszpuhA7aEoh4iWtVTi9l7T60OA/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIqQdlWwC2jQ4GgCvYgq4kSQOFPq94Hh-U_Xas8qIC43VupbQ_CGTnEm5pv9jP_XYQ6ip8ojVyr8nbdQ4S-F4P457r9KUsxA2hE3MaVxKJzDc71RYOrj-BD1tYKGv-rLmiy5GzylAsAk/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JSmUdopXNleQ2bH86GAHQqfbLOBrYbCsI6BQesF6f4F2eW9OKBEZUeJSE6UR-IFjO0o-OsgceGAjRIVokhJ6hMIcqkw32EF0GOBjf4rZgpd9E5FZHszpuhA7aEoh4iWtVTi9l7T60OA/'" /></a>

RESULT :