Many Button Images Within One?

[smerny]

Hello, I'm pretty much a noobie with this stuff... anyway the website runescape.com has a cool mouse over drop down menu bar and I was trying to figure it out... One of the things I noticed is this image they use for their buttons....{ display: block; color: black; background: url() left -24px;}If you look at that image, you see multiple button images within the one image... how are they able to use only parts of that image depending on different things?

[jlhaslip]

Without looking at the site, I'll bet there are different values for the left: -24px for each button.The left position slides the image sideways to display the correct part of the image for each different button.

[jeffman]

First, notice that the background declaration uses the all-in-one shorthand. Some items are left out, but the last two (left and -24px) refer to positioning. You will use those to reference the pixel coordinates of the different images (called "sprites") in the master image. As long as the image element's width and height only allow one sprite to be visible at a time, simply changing the coordinates will put a different sprite inside the visible area.Getting it straight can take some time and adjustments.The advantage is that your browser only has to download and cache one image, instead of ten or twenty. This makes the downloading faster, and also means that the rollover sprites are already in memory, so the user does not have to wait to see them when they are needed.

[smerny]

Thanks for your answers and thanks for the explanation dd