When It Just Needs to Look like a Rollover
on Thu, 02/07/2008 - 19:51.
Hello, World.
That seems appropriate as an opener for my first post on Labs. Usually I find myself on the less-technical, more client-management focused side of things here at EchoDitto, but I was encouraged to join the discussion here, so here I am!
So I was tasked yesterday with adding a graphic button to a client’s site and they wanted the image to change when you mouse over it. A rollover image. Simple enough. Except that I didn’t want to use Javascript. It would have been possible, sure, but I would have had to snag one of my friends on the tech team and it would have been a hassle. So I wanted to see if I could make it work without Javascript.
Luckily, the rollover image the client wanted to use simply involved changing the color of a particular part of the original image. In a flash of resourcefulness, I thought: CSS can do that! Five minutes later, I had what appeared to be a working rollover image.
First, I edited the original image so that the part that needed to change colors was transparent. Then, placed the image in my blog post on a white background. Finally, created a CSS class such that the background changes color on hover.
Voila! Instant fake rollover image.
Maybe it’ll help you next time you can’t, or don’t want to, bother with Javascript.
Not a bad workaround! But
Not a bad workaround! But really, why not just learn JQuery? It's super-easy, esp. if you already have a handle on CSS.
I don't know -- I'd say that
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.
Post new comment