CSS Sprites for Image Rollovers

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.

Continue reading CSS Sprites for Image Rollovers