The other day while working on a web project for a client I was looking for an easy way to switch out images for the different button states (ie. regular, hover, and active) in a typical navigation menu. I’ve always taken what I thought to be the most logical approach and just used CSS to change the background-image depending on whatever state was currently invoked. But, this leads to lag in image load time due to the browser “calling” and waiting for the other image to be served by the web server and sometimes with Internet Explorer this method can cause a flicker effect. Not the end of the world of course but still not desirable.
So, I remember reading about CSS sprites a year or so ago but never used them until the other day. Basically a sprite is an image with many images inside it. Facebook for example takes this to the extreme. They utilize CSS sprites to round the corners of your profile pic and for some other uses as well. Take a look at the linked images and you’ll probably get where this is going.
Basically instead of having multiple images swapped in and out by CSS you create one master image and use CSS to reposition the background-image to suit your needs depending on what section of the sprite you want to display to the user. No load lag and no flicker. Pretty snazzy…
I found two tutorials online which were easy to follow and within minutes I fully understood how to use and manipulate sprites via CSS. The first one I read was written by Dave Shea for the website “A List Apart”. The second one was from “Well Styled”.
Check out both the tutorials above and I’m sure you’ll agree this is the best, most elegant way to do this type of image manipulation. This may be old news so to speak but I thought it was still worth looking at again. I hope you find the info as useful as I did.
