Archives » March 5th, 2004

March 5, 2004

Sprites

Dave Shea writes in A List Apart about what he calls “CSS Sprites”. It’s a technique I’ve seen before, but I’ve never seen such a complete tutorial on it. It’s a way of creating sliced images and image maps, with rollovers, using one single image. This one image holds both the normal and active states. The idea is that you set it as the background image to your link, and use absolute positioning to slide it around until only the part you want to see is showing. So four links will just show four different parts of the same image, and their rollover states will show four more parts.

I know that’s not the most eloquent explanation, so read his article and look at the examples to get an idea of what it’s all about.