In this tutorial, I’ll show you how to quickly and easily use single images and a bit of crafty CSS to create easy image rollovers. You can also use this technique to simplify browser caching of your images by storing multiple images in a single “meta image”, so to speak. (There are some reasons not to do this, though.)

I don’t know if the creators of CSS were thinking of sprites (more on that later) when they thought of the background-position property [Never doubt the range of "what if" thoughts of those who created CSS—Ed] but thanks to many innovative CSS users, we have an excellent way to reduce the load times of our pages. Check it out, after the break.

You may remember the days when we had to write JS scripts to manipulate links and images to create rollover buttons using the onmouseover event and a tediously composed image preloading script. Now you can create rollover buttons (and many more amazing things) using VERY simple markup and a little bit of clever CSS.

Let’s look at an example of what we’re talking about here:

This is a simple rollover, but both the “normal” and “hover” states of the image exist in the same actual image. Seen here, it’s just a single image file:

CSS Sprite Demo

The “image” is in fact a div with a background image set. Since you can set the width and height of the div, you can choose how much of the background image “shows through.” And with CSS’s background-position property, you can tell the browser how to position the image behind the div.

Essentially, the div is a viewport, as if you were looking through a frame. The background image can be moved independent of that frame, changing which portion of the image you’re viewing.

Thus, a rollover simply tells the browser to change which portion of the background image should be visible behind the div.

A rollover button is essentially created in a few simple steps:

  1. Create a single image that houses all the “states” (normal, hover, visited, etc) of your button. Literally, you’re going to want to duplicate the image for each of the states. A good example can be seen with our home page’s rollover images.
  2. Find the pixel coordinates (top and left) of where each of these different images begin; you’ll use them to tell CSS where to “start” the background
  3. Create a simple html markup for your “button” link with an anchor tag
  4. Style your block element tag (we use divs) with at least the following properties (we use our own page’s example):
    display: block;
    width: 191px;
    height: 160px;
    background:url(/resources/images/synapse-button.jpg) [starting x-coordinate] [starting y-coordinate] no-repeat;
    
  5. Create different styles for your different states like hover by changing the background-position to show a different part of your sprite master image, and by implementing the :hover property
  6. Here’s our complete class for our nav divs on the main page:
    div#cssSpriteDemo div {
    /* Note the -160px y-coordinate; it tells the browser to pull the background up by 160 pixels, to our standard up button state */
    background:url(/resources/images/synapse-button.jpg) 0 -160px no-repeat;
    width:191px;
    height:160px;
    }
    /* The CSS psuedo-class :hover works in Firefox and IE 7. To make this behavior work on DIVs in earlier IE versions, you can use a JavaScript iterator that finds all instances of the tag and use JavaScript to fix the problem; it's a bit counter-intuitive, but you have to make due. */
    div#cssSpriteDemo div:hover,
    div#cssSpriteDemo div.iehover {
    background:url(/resources/images/synapse-button.jpg) 0 0 no-repeat;
    }
    

The best part is that you don’t just have to use this technique for sprites, you can use this to show nearly all the layout images for your page including logos, background fades, and other random UI graphics. This cuts down on page load time because fewer graphics have to be downloaded. It also reduces the number of calls to the server for a given page load. If you can house all your graphics in a single image file, it needs only to be downloaded once and it will be cached on the visitor’s computer, and will be immediately accessible every time you need to display a part of it. There are, however, potential problems like flickering which have workarounds. Accessibility is a concern as well.

Here are several other articles and websites that provide detailed instructions and descriptions on different ways to create and implement CSS sprites and great ways to reuse parts of images to create others images and effects.

We’ve all been told that history repeats itself and because the history of computers doesn’t extend back too far, many of us have seen trends and ideas reoccur in our own lifetime. That means that even though I’m only 23, I can still authoritatively say “Back in the day…” So, back in the day, video game developers used sprites to create optimized animations of their games.

If you’ve ever drawn a little stick figure flip-book animation at the bottom of your notebook then you should understand what sprite animation is. The only difference is that all the images for your animation are stored in a single master image and it’s up to the programming to change which part of the image is displayed. Eventually sprites were phased out as 3D graphics and 3D modeling were developed for video games. However, the idea of sprites has now returned to help the web development world have (slightly) faster loading pages and simpler rollovers.

Posted in: Design, How To