If like me you find “sprites” a bit of mystery then you need to check out the free online sprite creation tool at www.spritepad.wearekiss.com, simply drag and drop the images onto the SpritePad and you can see the CSS being dynamically generated as you move the images around.
When you’re happy with the result it includes a download option to download a zip version of the sprite and resultant CSS, then it’s up to you modify the sprite and CSS to suit whatever you want.
This is an example I played with earlier, it really did take the 5 mins they suggest to generate the sprites etc – easy peasy (and I’m really crap with sprites and images in general).
Now if you want hover style sprites, say for navigation etc, then the only real constraint is that they should all be similar dimensions because you’re controlling the image by repositioning it. Now again using spritepad this is easy to achieve because you can use the inbuilt grid lines to map your images to the same dimensions – there is also an auto align option but you need the premium account for that (and thats not free!).
Finally, if you’re asking yourself why this is useful think about:
– load delays on mouseover image replacement (initial unwanted flash/delay as new image is loaded)
– image sizes (a single combined sprite is generally smaller than the sum of its parts*)
* in the example the insect image (individual) weight was 92kb, or 70kb as a single sprite not a massive saving but every little helps