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/AVvXsEjCqgVgwHgpL98vg_KorYXYoL64Cff0tWNRM5rJSw9NcNqnjfnfGtjxILtO5IRnp1YpFTix4lFXNJGW6q0XtQA9zMpk5kwhW0iLW3HOwfhyphenhyphenXdvVcrYOIaruMMEeA03eWtAxhETmBSQU4Cs/" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDwYIyywvDrT3A4vmR0LgKmh9DNo7pBf5KEEdEcuOc8nptxIrfu590CJ2VvE1DIQ2N3GL2XJJcxoJWPLo15pJfGw2kzdfA3Y3fnSGmsMmPO7sdGfgtkM8OPWtiLkCrYz9iQvPpvSpyrY/'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCqgVgwHgpL98vg_KorYXYoL64Cff0tWNRM5rJSw9NcNqnjfnfGtjxILtO5IRnp1YpFTix4lFXNJGW6q0XtQA9zMpk5kwhW0iLW3HOwfhyphenhyphenXdvVcrYOIaruMMEeA03eWtAxhETmBSQU4Cs/'" /></a>
RESULT :
0 Comments:
Post a Comment