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="http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg" onmouseover="this.src='http://1.bp.blogspot.com/_ar9PeTUrwMY/Stfedv95ncI/AAAAAAAAAyo/qKWJMwsvNes/12396.jpg'" onmouseout="this.src='http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg'" /></a>
RESULT :