|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Roll Over, Rollovers -- CSS Styleby Eric A. Meyer
Sure, CSS lets us change text colors with
Eventually it hit me: with a little creativity and the
Overall, these approaches will only work in browsers with a version number of 5 or higher, and even then there's no universal support. Some of them may even lead to mangled display in Navigator 4.x, but that's only to be expected when you take standards and push them to their limits.
So here we go with three different ways to get rollover effects using nothing but HTML and CSS. You may be surprised at just how much can be done. I know I was!
Hovering the ... background?
To varying degrees, all of these tricks will involve changing the background of an element. The first one we'll try will look just like a traditional rollover to the user. The key is to take the various link states and make them backgrounds of another image. No kidding!
First we'll set up the HTML. Just bear with me on this one. First we'll need a completely transparent GIF image. Its size doesn't really matter, although you probably don't want to make it too big. Even a single-pixel image will do, so long as it's transparent. The key, really, is that every pixel in this image must be transparent. Now we'll use this blank image as the basis for all of our various buttons. Each button will be enclosed with a hyperlink -- each of which has a unique identifier.
Now it gets fun. We want to have each button (and we'll assume that each button is the same size) use its own unique background image. Thus:
It's absolutely imperative that your backgrounds be the same size as the transparent button you've created, or else this won't look right. Also, if you want borders around your images, then don't set the border width to zero as I did.
Okay, fine, we have a bunch of images that look like normal images, but were in fact constructed through some convoluted method. It only seems convoluted right now, however. It gets less so as we add links states to the mix. Obviously, we want a hover state, so that the buttons get highlights as we move the mouse pointer over them. So next we add these rules:
There we have it: buttons that will highlight as we mouse around. Note that we've associated the hover state with the hyperlink, since that's the only element most browsers will recognize as being hovered, but we are applying the background to the blank image -- not the hyperlink! (As always, the rules are applied to the last element in the selector.)
You can see all of this at work in Example 1.
There are several other benefits with this trick. For example, you can resize your various buttons from your CSS if you want -- and never touch the HTML document. For example, let's assume that the home button should be twice as long as the other two. All we have to do is add this style:
Because we already set its height with a previous rule (the
All told, there are only two real drawbacks to this trick. First, all of your buttons in the source are the same file, and it's blank. Thus, if someone has CSS turned off (or their browser can't handle it), then they won't see a button at all. Second, it doesn't seem to work at all in Opera 5, and it's fairly slow in Navigator 6. In the latter case, it seems to not bother loading the images until they're needed, which can lead to slow refresh rates for dialup users. It might be possible to speed them up by doing an "invisible load" of the images -- possibly loading them into the foreground with a height and width of zero. You won't be double-loading them, but instead forcing the browser into getting the images before they're actually needed so that they can be pulled out of the cache. Still, this is the kind of thing we're trying to avoid, so it counts as something of a drawback.
Less blankness, less flexibility
Okay, so maybe you aren't comfortable with making all of your button images blank, but you still want to do link highlighting and other stuff. If you're willing to sacrifice a little flexibility, you can have just that.
This is based on a trick I first learned from Todd Fahrner. By setting a grid of transparent pixels, you can let whatever's behind the image come partway through, giving a nice screening effect. In Todd's example, this was used to lay text over a background image, and I used exactly that effect recently in a digital Christmas card I created for my wired friends and family. But what if we mess with the background of the image itself? Consider:
That's the same image five times, each time with a different background color (check the source if you're feeling skeptical). In fact, the first image has a background color that is equal to the non-transparent background colors in the image itself. This smooths out the background color of the button, making it look solid. Of course, we can use any color or even a background image, so long as we don't mind it getting a bit washed out:
With sufficiently creative buttons and backgrounds, you could get very close to effects that are indistinguishable from traditional rollovers. The trick would lie in knowing which pixels to make transparent in the foreground image. The half-screen might not be the best approach -- it might be better to make all of the background except the text (or icon) transparent, and then let the various highlighting effects shine through.
You can see this trick working in Example 2.
This approach has all of the advantages and none of the drawbacks of the previous trick, and even avoids the "all my buttons are really just blank" problem. However, since some of the foreground is visible, that part of the button can never really change. You can only alter the things around the visible portion of the button, which is why I say you have to sacrifice some flexibility. Of course, sufficient creativity can overcome any obstacle, right?
In fact, the only real drawback with this trick is that for some weird reason, Internet Explorer 5.x for Windows can't handle it. Since the trick is based on the same basic approach as the previous trick, this is hard to fathom, but it's true nonetheless. The buttons will still appear, but the background color doesn't change. Odd.
No images, restricted utility
Of course, there's always the approach of styling hyperlink text itself, not involving any graphics in the process, and letting the chips fall where they may. This involves giving up some control over appearance, but there you have it. You can still do pretty neat stuff. The following two links are just plain text links with moderately complex styling. It actually isn't too out there in CSS terms, but browser support has only recently caught up to this sort of thing:
In each case, we've set some padding on the links, and given them backgrounds and borders. Then we simply change the styles for each state.
Check out Example 3 to see all this happening, but remember: The older your browser, the worse it will look.
The advantages and drawbacks here are about evenly balanced, in my opinion. You get the benefit of simply styling text, so you have absolutely no accessibility problems, and you don't have to consume bandwidth with downloading a bunch of images (unless you want to toss them into the background). However, only the most recent browsers will even get close to doing this correctly. You'll be in danger of tripping over some nasty legacy bugs in Navigator 4.x, so you might want to use
In addition, Opera 5 doesn't handle this quite as nicely as one might hope, seeming not to honor the padding, although it's not too far off from the ideal. So while the markup in this trick is quite a bit simpler, you give up quite a bit in terms of backwards consistency. If that's a major concern, then this approach might not be right for you. If you're willing to look to the future, then it just might be your ticket.
You could change the style to