Question

I’ve just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn’t know it was an issue until someone told me about it)

After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.

Now I have a CSS file that’s extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:

I am familiar with javascript (not much JQuery though)

I have all of the dimensions and offsets for the images from the packer.

The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture

I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)

Answer 1

You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.

<a class="buttonA Image5"></a>

.buttonA {
   width:100px;
   height:30px;
   display:block;
}

.image5 {
   background-image:url(...);
   background-position:....
}

If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.