A while ago I wrote a small post on how I had used the CSS style of display: none in order to hide images that I had used for rollover. A commenter had said this was the wrong way to do this and using CSS sprites was the best method. Having done some research here is what I have come up with in using CSS sprites for image rollovers.
I first wanted to use them when I had a background image on a particular element and then I wanted this to change when the mouse was hovered over the item. This is easily done with background-image in CSS. The problem is that the hover image is only loaded on hover and therefore there is a short delay in the loading on the image which looks messy.