sohbet

Anonymous — Tue, 16 Sep 2008 14:11:46 -0700

Thank you thank you thank

rimbaud — Wed, 20 Aug 2008 11:06:13 -0700

Thank you thank you thank you! This has saved me a lot of grief.

I don't know -- I'd say that

Tom — Wed, 13 Feb 2008 14:17:04 -0800

I don't know -- I'd say that a CSS rollover should be the preferred option. For one thing, it'll degrade gracefully in the face of a partial JS implementation (my old T-Mobile Sidekick comes to mind). For another, it'll typically take less bandwidth to do the CSS rollover (if you're using a JS framework, anyway). For a third, you typically attach JS events after the DOM finishes loading -- CSS will work during page load. And finally, you have to jump through some hoops to preload images (prior to rolling over) if you do it with Javascript. With CSS there's no need.

The only downside to the approach Meaghan outlined is that it only works for rollovers with solid colors. But there's a variation I've seen some of our design partners deliver that gets around this limitation.

First, define a hyperlink with a fixed height and width. Give it a background image that's twice the height it needs to be: the top is the normal view, the bottom is the rollover. Then set the hyperlink's :hover pseudoclass to add "background-position: -20px 0;" to the element's styles when the mouse is over it (for a button that's 20 pixels high, of course -- in this case the bg image would be 40px tall).

The bonus to this approach is that if the image is loaded at all, so is the rollover. The downside is that it relies on a background image for conveying meaning, which can potentially be less 508 compliant than an image with an appropriately-defined alt tag. As a workaround I suggest giving the hyperlink the "overflow:hidden" style and a large enough padding-top value that the link's text will be safely pushed out of the viewable area (and hidden by the overflow setting). That should be easily spiderable/screen-read and not interfere with your rollover's appearance.

Not a bad workaround! But

Ben — Wed, 13 Feb 2008 05:29:34 -0800

Not a bad workaround! But really, why not just learn JQuery? It's super-easy, esp. if you already have a handle on CSS.

EchoDitto Labs - css - Comments

sohbet

Thank you thank you thank

I don't know -- I'd say that

Not a bad workaround! But