I was recently asked to help out with getting a CSS Image Sprite to work as a replacement for the default primary menu / navigation bar on a new WordPress site. I have to admit that whilst I have seen the effect used on some websites I had no specific idea of what a CSS Sprite was or how it worked, so of course I enlisted the help of my buddy Google to find out more. The basic idea with using what is called a Sprite instead of the old fashioned image map or a button graphic is that they are quicker loading.
Ok, but what is a Sprite you may still be wondering. Its basically a collection of images put together into a single image – and then used for multiple “buttons”. The “before” state image is in the top row, and the image for the hover or active state is in the row below. The image as a whole is divided up into a grid. Most usually used for Social Media links on websites. Because it is one single image it only has to load once, and then each “button” is referenced with CSS positioning, showing only the part of the image we need in each case for each state.