It's all about optimization
It's all about optimization
Downloading one image is more efficient than downloading two. If you have two images being loaded for a button with a hover state, your user will have to make two HTTP requests, and download two files with their associated HTTP header overhead. The sprite method lets you combine the two imnages into one and use CSS background positioning techniques to switch between them. This method also lets you discard all the image preloading techniques you learned... they're not necessary any more.
While this method does employ less (but larger) images, it requires substantially more CSS. Sprites have many advantages like faster hover effect response without any preloading - it is encumbent on you to determine if the amount you save by omitting image preloading offsets the added CSS to achieve the same effect. I presume if the effect is used for multiple screen elements, the savings could become substantial.
Here is my simple example, adapted from the tutorial at alistapart. Hover over the squares to see it in action.
This effect was achieved using only one image:
And the following code:
A full explanation of the technique isn't warranted here, when it is already explained so well elsewhere. See CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea and Fast Rollovers Without Preload by Petr Stanícek