Webvamp
Webvamp

No loading time is required for the rollover because the whole image is loaded as a background when the page loads.

Requires only one image that is reused for all states. Must have at least one area for each button + rollover.

Here is the whole image. It is 108 px wide and 72 px high.

- The width (54 px) and height (36 px) values in a.rollover are the size of the single (quarter in this case) image.

- The value of background-position is that of the single button image width - since we are literally moving from one part of the image to another.

- The span tag is included with a text alternative to the image. It is displaced off the side of the visible screen so that, although it is not visible, screenreaders will read it, and in the event of no CSS support a text link will be shown instead.