Simple CSS Image Rollovers

These demonstrations use good, old accessible IMG elements with a little help from CSS to provide the hover/active images. The hover images are applied to the anchors as background images. During the anchor's hover state, its child IMG element is made invisible, bringing the hover image into view. (The additional active state could be achieved by sliding the anchor background image up or displaying a different one.)

Vertical List

IE5.01/win Note: Although single block anchors would function, this vertical list was too buggy. The method is hidden from it, but works fine in IE5.5+/win.

Horizontal list (floated `LI`s)

Block Anchors

Plain Block

Block Anchors Floated Left

Inline Anchors (a bit limited)

Note: Only this particular vertical-alignment (text-bottom) works the best across most browsers.

Now we can have controlled by . Isn't that ?

Notes

For the inline anchors, the problem is keeping the anchor exactly tall enough for the image. I seem to have the best performance by giving the images vertical-align:text-bottom, aligning the anchor backgrounds against the bottom, and giving the anchors font-size:37px.

8/16/05: IE5.5/win now can do the vertical list w/o a left margin. The list must not have layout (I used a container to limit width).

9/22/04: Thanks to Bruno Fassino for the tips to get IE/mac (suggested display:inline-block) & Safari (suggested text-bottom) working in all flavors.

Features

No image preload, Javascript or complex IR method needed.
Accessible alt-text: Safe degradation into simple, linked images (or text in text-mode browsers).
Tested win2k: IE5.01, IE5.5, IE6, Moz1.7a, Opera7. Mac: IE5, Safari

Sources

wd.mrclay.org (coming...eventually) 9/14/04.