Accessible Image-Tab Rollovers

*Example-specific CSS is coded locally, in the head of the page. Should use @import method to hide from old-school browsers in actual live/production implementation.

Technique involves creating one image for each navigation item that includes normal, hover, and active states stacked on top of each other. Then use CSS to change the background-position to reveal each state at the appropriate time.

• use a simple unordered list for the navigation in the markup. Why use lists for navigation: They’re compact, lightweight and accessible
• uses Pixy’s Fast Rollovers
• also uses Stuart Langridge’s accessible image replacement technique.
• detailed explanation at SimpleBits