I just made a page with my own rollovers. Might not be perfect, but here is what I did. I used a transparent gif (icon.gif) as the image encased in the link. It is 32px wide and 27px high. All of the images used in this technique are the same size.
EDIT: To clarify, I am using a background image that is showing through the transparent image in the page. When I hover over the link (the transparent image encased in the link), the other background image appears underneath. I am using the psuedo class hover to create this effect.
<a class="home" href="#"><img src="images/icon.gif" alt="Go to the Home Page" /></a>
Here is the CSS :
background: url(../images/home.gif) no-repeat top left;
background: url(../images/home2.gif) no-repeat top left;
Here are the images:
Transparent Spacer (icon.gif)
Highlighted Home Icon
You can see this rollover in action at http://www.ashleywalters.net/templat...sp/default.htm
It's the home icon in the gray bar beneath the banner. My actual CSS had some spacing and floating to it, but I posted the bare basics here to get the job done. Just know you will have to tweak the image if it is set as display:block and you want it positioned somewhere specific.