Creating Navigation Buttons with CSS Sprites

CSS buttons have become a common technique in most Web developers' arsenal of tricks. Where once we used clunky JavaScript to change the appearance of a graphic when the user rolls over or clicks it, modern Web designers use the CSS :link, :visited,:hover, and :active pseudo-classes to swap out images in the link's background without ever having to program a single line of JavaScript.

However, there is a drawback in the form of a slight (but annoying) delay as the image files swap out. We overcome this delay by bringing all of the images for each state into a single image file.

This technique, referred to as CSS sprites, lets you create a single image ile that contains in a grid all four of the rollover-state graphics used for the button. In that file, you place all the individual "sprites" that make up your button, separated by enough space so that they don't start running over each other. You then call this image as the background for an element, and set the background position property (using negative values to move the background up and left) to position the correct sprite (Figure 23.1). Because only one image needs to load, the browser needs to make only one server call, which eliminates the file-swap delay.

Figure 23.1. The button list uses the same image not only to create the graphic background, but all of its states as well.

To add CSS image rollovers to a Web page:

buttons_01.png

Start by creating four different background image states, separated by a small amount of space (Figure 23.2). Generally you will want to space the states so that their positions are regularly spaced, making them easy to remember. For example, I set the top of each graphic at intervals of 25 pixels.

Figure 23.2. buttons_01.png:The image used to create the different rollover states for our navigation button.

The images shouldn't use a height much larger then the font size you're using for your text. Save all four button states as a single file. You can use any graphic format supported by browsers (generally GIF, PNG, or JPEG).

#navigation a{…}

In your CSS file, set up a style rule for the <a> element as it is presented within the #navigation layer (Code 23.1). The rule needs to include:

Code 23.1. The styles for links in the navigation area use the `button_01` graphic to create the multi-state rollover effect.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Creating Navigation buttons</title> <script type="text/javascript"> </script> <style type="text/css" media="screen"> h1 {      font-size: 1em;      color: red; } h2 {      font-size: .9em;      color:#999; } .page { width: 756px; } #content {      float: left;      font-size: 1em;      font-family: Georgia, 'Times New Roman', times, serif;      color: #000000;      margin: 8px;      width: 300px;      padding-top: 225px;      padding-left: 175px;      background: white url(alice23.gif) no-repeat; } #navigation { float:left; } #navigation a {      text-decoration: none;      font: bold 12px Arial, Helvetica, sans-serif;      overflow: hidden;      display: block;      background: #fff url(buttons_01.png) -1px -1px no-repeat;      margin: 4px 2px 0px 2px;      padding: 4px 8px;      width: 218px;      height: 16px; } #navigation a:link {      background-position: -1px -1px;      color: RGB(255,51,51); } #navigation a:visited {      background-position: -1px -26px;      color: RGB(255,102,102); } #navigation a:hover {      background-position: -1px -51px;      color: RGB(255,0,0); } #navigation a:active { background-position: -1px -76px;      color: RGB(255,255,255); } </style> </head> <body> <div > <div > <a href="index.html" onfocus="if (this.blur) this.blur();">Introduction</a><a href= "ch01. html">Down The Rabbit-Hole</a> <a href="ch02.html">The Pool of Tears</a> <a href="ch03. html">A Caucus-Race and a Long Tale</a><a href="ch04.html">The Rabbit Sends in a Little  Bill</a><a href= "ch05.html">Advice from a Caterpillar</a> <a href="ch06.html">Pig and  Pepper</a> <a href="ch07.html">A Mad Tea-Party</a> <a href="ch08.html">The Queen's Croquet-  Ground</a><a href="ch09.html">The Mock Turtle's Story</a><a href="ch10.html">The Lobster  Quadrille</a><a href="ch11.html"> Who Stole The Tarts?</a><a href= "ch12.html">Alice's  Evidence</a> </div> <div > <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> Lewis Carroll <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> </div></div> </body></html>

display: block; background: #fff url(buttons_01.png) -1px -1px no-repeat;

Set the background image to not repeat and position it at the top left of the link area. Then add enough padding to the left side so that the link text isn't on top of the image (generally, the width of the image plus a few pixels). Also set the width and height to create the "mask" around the image.

#navigation a:link {…}

Now add rules for all of the link states (:link, :visited, :hover, and :active), setting the background position property with the correct offset values to load the relevant rollover state. For example, the visited state would use:

background-position: -1px -26px;

So only the visited button state is shown (Figure 23.3).

Figure 23.3. Each button state (`:link, :visited, :hover, :active`) is revealed as the background slides up and down within the visible area of the button.

You can, of course, include whatever other style changes you want to make. In this example, I'm also changing the text color.

Tips

The idea (and the last part of the name) for CSS sprites originated in the early days of video games, when memory and speed were at a premium. To overcome system limitations, video game producers would lay out the thousands of small graphics used to create the game into a grid and then display each "sprite" as needed, masking out all but the needed part of the larger image.
You may notice that when you click on one of these links, there is no annoying border left around it by the browser. For more details, see the sidebar "Getting Rid of Annoying Active Link Borders."

Getting Rid of Annoying Active Link Borders

Internet Explorer 5 introduced (and many other browsers have adapted) what might be one of the most aggravating features possible to Web designers: the active link border. Those are the boxes that appear around a link after it has been clicked. They can interfere with your design, especially if you're using CSS image rollovers or if the links are in a frame, so the border persists even after the linked page has loaded. There is a way to get rid of these, however. Simply place the following code in the links for which you want to turn active link borders off:

onfocus="if(this.blur)this.blur();"

This code tells the link to blur itself if it's focused, which gets rid of the border. Keep in mind, though, that by adding this code you are removing a specified browser behavior, which may limit accessibility for some users.

Figure 23.1. The button list uses the same image not only to create the graphic background, but all of its states as well.

Figure 23.2. buttons_01.png:The image used to create the different rollover states for our navigation button.

Code 23.1. The styles for links in the navigation area use the button_01 graphic to create the multi-state rollover effect.

Figure 23.3. Each button state (:link, :visited, :hover, :active) is revealed as the background slides up and down within the visible area of the button.

Getting Rid of Annoying Active Link Borders

Code 23.1. The styles for links in the navigation area use the `button_01` graphic to create the multi-state rollover effect.

Figure 23.3. Each button state (`:link, :visited, :hover, :active`) is revealed as the background slides up and down within the visible area of the button.