How to apply mouseover/mouseout/rollover to images in one picture library

Question

I have the images like so in one picture lib. Is there a way i can apply mouseover to these images e.g Originla images is : gin.jpg and rollover is ginHover.jpg without needing to create another pic lib

<div id="foo2">
<img width="130" height="130" alt="Virgin" src="/sites/gin.jpg">
<img width="130" height="130" alt="Optus" src="/sites/Op.jpg">
<img width="130" height="130" alt="Telstra" src="/sites/stra.jpg">
<img width="130" height="130" alt="OptusHover" src="/sites/OpHover.jpg">
<img width="130" height="130" alt="TelstraHover" src="/sites/straHover.jpg">
<img width="130" height="130" alt="VirginHover" src="/sites/ginHover.jpg">
</div>

THanks in Advance

Answer 1

You can use a css sprite and upload a single image in the document library corresponding to the rollover.