You can actually shorten the CSS code for the above example I believe:

Taken from your CSS:

div#sprites a
{
float: left;
width: 130px;
height: 105px;
display: block;
background-image: url(’apple_sprite.jpg’); /* add this */
background-repeat: no-repeat; /* add this */
}

Then on each of the anchor tags, all you need to do is add position, like below:

a#top-left { background-position: 0 0; }
a#top-left:hover,a#top-left:visited { background-position: 0px -210px; }

….

In this way, the CSS code is less and also if you decide to replace the image, you won’t have to through each of the anchor tags and modify its background image’s url.

Thanks,