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.

IMAGE-DESTINATION-URL">IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" />

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 :

http://bloggertipandtrick.blogspot.com/">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilf-FBvaCgKae8efCJjD2sArzsW_5ilqWja-RPlLVy4ZlUXtN6Y2Pc2nh-BPOqJC2o7rb-cNzUS0tYj1ARuxFdi7rsXfra5Qz_a9UbAyBbG_8QnvgwIR33QSf9XQe9FbAeYgaqP-Xgxw0/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1-4qXUYjGL9M1-UdxdfHg7OBv8ZbGsdqaGQj_6dQxuHx8ypxHVloLiwTN0sk8x25kaxEbNH_RFr_8EMYOaI6d-ekd5G1nn_05JwnNclljkmpgpco5pqWD0SHuBGVM9HhnpPkKnriEGE/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilf-FBvaCgKae8efCJjD2sArzsW_5ilqWja-RPlLVy4ZlUXtN6Y2Pc2nh-BPOqJC2o7rb-cNzUS0tYj1ARuxFdi7rsXfra5Qz_a9UbAyBbG_8QnvgwIR33QSf9XQe9FbAeYgaqP-Xgxw0/'" />

RESULT :