Based on this guide
Create your image double height with the roll over image in the bottom half
In the <head>
<style type="text/css">
a.myrollover {
display: block;
width: 80px;
height: 30px;
background-image: url('button_combined.png');
}
a.myrollover:hover {
background-position: center bottom;
}
</style>
Then for your link
<a href="#" class="myrollover"></a>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.