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/AVvXsEjba7_zktWwB42HbPWJIkO3wj2Z_ijkyQZsw2WHzGMqjzNSWdEX2IRB3CLHBbqoj_r3MeZ5tIQjniL6hou7BgOOBEpgPQxzxQw3TS56-oNrsZhY2q8SpgLwVtNnVvW8yqnzu1o6Fd4ZAYw/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-w2zO1Iqp-0oiFBTxVndO8gwrarqRNoh37Vl711jpUbdd88SXVgrvu9ptupHLCTYaa9t6Qlmm2O0rQO7wVG0ZR-Frfh3Zpo4kjebra6rpwAbhMuUn7Q3WMPQX_3W4lChBsa3jTdOLRk/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjba7_zktWwB42HbPWJIkO3wj2Z_ijkyQZsw2WHzGMqjzNSWdEX2IRB3CLHBbqoj_r3MeZ5tIQjniL6hou7BgOOBEpgPQxzxQw3TS56-oNrsZhY2q8SpgLwVtNnVvW8yqnzu1o6Fd4ZAYw/'" />

RESULT :