Hey, kids! Let’s see if we can use
CSS
background-image to create
navigation tabs that have real text in them!
Advantages
- Loads much faster than conventional implementations because there’s only one image in the whole thing.
- Tab text is selectable, searchable.
- To change the style of buttons across several documents, only need to change one gif, and maybe a CSS page, as opposed to re-generating multiple gifs for each button.
- Works in non-CSS browsers, but doesn’t look like tabs, of course.
Other ideas
- Of course, nothing here rules out JavaScript. To implement buttons that change on mousedown, you’ll still have to use it. But rather than n × 3 separate gif’s for normal, hover, and mousedown, you only need 3 gifs.
- Might also use JS to pre-load the images.
- Can make buttons with backgrounds that change on hover using JS. Only trouble is, as this is implemented, it is only easy in DOM- savvy browsers.
- SVG images would be even better, at the cost of reducing funcionality in more primative browsers.
Problems
- A little of the body color shows between the tabs. This could be fixed by introducing more tab gif’s. Is there a solution that doesn’t require extra gif’s?
A wish
- No success re-loading background on hover. Would like to put an element with a background inside an anchor element, but only block elements can take a background, and a block element can’t be inside the inline anchor. Defining the anchor as a CSS block display allows the background image, but only displays partially in NS 6, and not at all in Opera.
-
It would be nice if somehow block elements could be inside an
anchor, or if general elements could take pseudo-selectors
such as
:hover.