Alex Pooley's Blog

Quick Navigation:

1. What Are CSS Sprites?
2. CSS Sprites Ruby Script

What Are CSS Sprites?

One hurdle faced by web developers today is the problem of roll over effects on elements other than links. This would not really be a problem if Internet Explorer would handle :hover on non ‘A’ tags, but unfortunately this isn’t the case. One solution is to use javascript to catch movement of the mouse over and back out. Unfortunately you will also have to pre-load images otherwise the hover image will have to be loaded on first use which causes a lag in your desired effect. The other option is to use a cleaner technique known as CSS Sprites. With CSS Sprites, your images are concatenated to form a big composite image. Then each original image is rendered in CSS by specifying your image’s location in the composite image, and restricting the render to the size of the image. So it’s kind of like sliding a small viewport over a large image… for example:

Here’s a composite image, scaled 50% to fit on the page:

Here’s the desired rollover effect with a link to news regarding the violence in Kenya:

(BTW, if yet more Kenyan violence is not to your taste, you may want to check out the poor folks in Haiti who have to eat mud biscuits to survive. $5 for 100 biscuits, MMmm… look out Donut King.)

Here’s the CSS to get the desired effect:

#kenya_20080202_rollover a {
	display: block;
	left: 0; height: 300px; width: 400px;
	background: transparent url(kenya_20080202.jpg) 0 0 no-repeat;
}
#kenya_20080202_rollover a:hover {
	background: transparent url(kenya_20080202.jpg) 0 -400px no-repeat;
}

In the example above, kenya_20080202.jpg consists of our two images concatenated in to one SUPER image. Then all we need to do is:

1. Define the width and height of the element to restrict the size of the viewport.
2. Define each hover state (off/on) by translating the image n pixels to the left, and m pixels up.

So in the case of our example, when the link element inside kenya_20080202_rollover is hovered by the mouse, the background will change to our composite image. Because we restricted the dimensions of kenya_20080202_rollover, only a fraction of the composite image is shown, and because we then translate the image by 400 pixels to the left, and 0 pixels up, only our desired hover image is displayed.

An added benefit of joining all the images together in to a single image is that the page should download faster as there are fewer requests to the web server, and possibly better image compression. So you may want to use the CSS Sprites technique to render plain images, and not just for roll over effects.

CSS Sprites Ruby Script

Now, given that I’m a programmer and I abhor tedious repetitive tasks, I decided to code an image concatenation utility instead of manually joining all the images together in Photoshop. The software is NOT a huge programming feat, it just leverages ImageMagick, and it’s less than 100 lines of Ruby (I love Ruby). Though the script is written such that it is easy to add features and hack it up to your requirements. The main advantage of using this software over doing it manually is that from the command line you can call the script with an output file and as many input files as you like, the script will join them, and then spit out their x,y locations in the composite image. It’s available in source form from http://rubyforge.org/projects/spritemaker/. Please be sure to read the README if you do grab it, and feel free to hack it up and send back any improvements!

Here’s how I used the script to make the above demo:

alex$ spritemaker kenya_20080202.jpg kenya1_20080202.jpg kenya2_20080202.jpg
x       y       width   height  filename
----------------------------------------
0       0       400     300     kenya1_20080202.jpg
400     0       400     300     kenya2_20080202.jpg

Nothing fancy, but it can save you a lot of time. Especially if you need to keep updating images, and hence the composite image.

If you would rather a web service, then you can check out website performance’s online CSS Sprite maker where you can upload your images and create composite images. They have also open sourced the web service if you want to hack it up. I think their code is in PHP.