How To Create Rollover Images in Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

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.

<a href="http://www.royaltutor.net/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynaWgqx6ZB1ccABZYJIeEmn5p42Q2xi-S6vBHg1tkRl-JowpTr7__eR2a8aTcS1KlscFn4lpzkCMkKfXh5kJNNQ1EC0uJDON0tsZobPBzXsq9JFkyGv4T3X_zY_t0Kt1ZvyN9nDpSpPw/s1600/1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGC-qKxLSK_pNy-qcCinBm0P9MAdYHjfpsh6qhNswLI19yAOaDh3IrxRnmqTC2cZQJWUrKJk2SkGeWVN0pS0rmdt8Zu0JaGo889YI75CsxMH92hnk8EfINsvuUHC6hvcrIsVY8cSXLS8s/s1600/2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynaWgqx6ZB1ccABZYJIeEmn5p42Q2xi-S6vBHg1tkRl-JowpTr7__eR2a8aTcS1KlscFn4lpzkCMkKfXh5kJNNQ1EC0uJDON0tsZobPBzXsq9JFkyGv4T3X_zY_t0Kt1ZvyN9nDpSpPw/s1600/1.png'" /></a>

The output will be like this:



That's it.