Navigation with Image replacement

Explanation

The first thing to do is to create the sprite with the rollover states that you need.

Here it is:

Next create your list structure to hold the navigation and for accessibility use an image replacement technique that allows the text to be visible should css or images be missing. For this we will place the text in the anchor but place the image sprite on top of the text to hide it using an empty inner element (such as an "em" element in the example below).

<ul id="nav">
<li class="go"><span>Replacement text goes Here<em></em></span></li>
<li class="product"><a href="#">Replacement text goes Here<em></em></a></li>
<li class="inspired"><a href="#">Replacement text goes Here<em></em></a></li>
<li class="blog"><a href="#">Replacement text goes Here<em></em></a></li>
<li class="contact"><a href="#">Replacement text goes Here<em></em></a></li>
</ul>

CSS:

#nav{
width:1005px;/* width of nav */
height:36px;/* half sprite height*/
margin:auto;
}
#nav li,#nav li a,#nav li em,#nav li span{
width:201px;/* width of image*/
height:36px;/* height of image = half sprite height*/
text-decoration:none;
float:left;
overflow:hidden;/* hide text if zoomed*/
position:relative;/* stacking context for absolute element*/
cursor:pointer;
}
#nav li em{
background-image:url(images/sculleynav.png);/* multiple sprite image*/
background-repeat:no-repeat;
position:absolute;
left:0;/* place image on top of text to hide it */
top:0;
}

In the snippet below I have use an "em" element to hold the sprite image but a span would suffice if you don't care about ie5mac (as it wont allow the span to be clicked). The "em" element will be absolutely placed on top of the text to hide it but it still allows for the text to be visible should images or css be disabled and is also available to screen readers and the like.

<li class="product"><a href="#">Replacement text goes Here<em></em></a></li>

The list elements all need to have a class as you need to identify them to apply the correct part of the sprite as you will be using a different background position on each element.

In this demo the images are luckily all the same width and height but you could have variable width images also and would just need to adjust the dimensions of the elements and the background positions accordingly.

The part of the image that is shown needs to be moved using a negative dimension for the background position as this pulls the image upwards and sideways when required to reveal the part of the sprite we want to see.

e.g. for the product image we need to shift the sprite 201px to the left so that the product part of the image is shown:

#nav li.product em{background-position:-201px 0}/* position of sprite within the image*/

On hover we move the vertical position to reveal the rollover state:

#nav li.product a:hover em {background-position:-201px -36px}/* position of sprite within the image*/

To make a "current" state for the current page you could add a current class to the anchor and style it the same as the hover states for each item. However for accessibility the current page indicator should not be clickable as that would lead to a re-load of the same page and make the user feel stupid.

Therefore I prefer to substitute another element instead of an anchor for the current page and style that instead. This means that when clicked nothing happens because you are already ion that page.

#nav li.product a:hover em,
#nav li.product span em{background-position:-201px -36px}/* position of sprite within the image*/

Now go and do that for all the other list items and you should be finished.

The Full CSS required:

That's about all there is it! (ignoring the fact that the sprite image used in this demo would look almost the same as if we'd used no images but browser text and background colours.)