So, you’ve written a page using image replacement but you need rollover effects as well? That can be done. (For those unaware, “image replacement” is a CSS concept, implementable in several ways, where a page’s HTML has regular
tags which are then dynamically replaced with image-based headers through CSS.) And, of the various image-replacement techniques the Gilder/Levin technique is my favorite for general use as it preserves text accessibility even in the unlikely event that a user has CSS turned on but images turned off. As you might guess, all of the image-replacement techniques are based on CSS background images; and, in the case of rollovers, you would think that you could just change the background-image on a:hover. That works in Firefox (no surprise) but not in IE (which is not a huge surprise, either).
Oddly enough, IE seems able to change an anchor’s background image through :hover, but it doesn’t change the image back to the “off” state after the user rolls off. Though we ran into this on a page for a client, I created a minimized test case (encompassing just the UL and little else) but without cooperation from IE. So, I turned to other means and was able to achieve the effect with a combination of pixy’s CSS rollovers and the Revised Phark image-replacement technique.
Here’s how it came together. I’ll go over the HTML first and then the CSS. I’ll assume the navigation items are Alice, Bob and Carl for the sake of the example.
So, the navigation items are just in an unordered list here, as that was most semantically appropriate in our case. Then, the CSS begins. First some generally styling for the list to place it inline:
/* You’ll also need to add width:100% here (or whichever value you prefer) if you’re absolutely positioning your list */
/* width: 100%; */
/* Widths are required since these elements are floated. This is just an example width; and feel free to define specific widths for each LI (via their IDs) if you need to. */
/* This provides space between each item */
margin-right: 4px; /* This is just an example margin */
/* “!important” shouldn’t be necessary here but IE5.0 acts goofily without it. */
height: 34px !important; /* This is an example value representing the height of each image */
/* If your primary-nav is absolutely positioned, this ensures that nothing bleeds out of the primary-nav. Without this, the “stacked” background bits could stick out from the bottom. */
/* hide overflow:hidden from IE5/Mac */
/* The last item in the list (well, our list, anyway) has no right margin */
There’re also some properties which apply to each of the h2 and anchor tags within the list:
/* This ensures that the rollover containers, h2 and a, fill the
li boxes */
ul#primary-nav li h2,
ul#primary-nav li h2 a
And, then text-hiding aspect of the image-replacement is applied:
/* This hides the text via the Phark text-hiding method:
ul#primary-nav li h2 span
Now the interesting part begins . First, make sure that you’ve constructed the “stacked images” for the rollovers as outlined in the pixy rollover technique (we stacked ours vertically, with the “on” state on bottom). Then it’s just a matter of defining three more IDs — well, three more IDs for each navigation item.
/* ================= Primary Nav: Alice ================ */
/* The “Alice” link */
ul#primary-nav li#nav-alice h2
/* Our images were 40px high, so a 20px shift shows only the bottom “on” half */
background: url(../images/nav/search-background.gif) 0 -20px no-repeat; /* On state image */
ul#primary-nav li#nav-alice h2 a
background: url(../images/nav/search-background.gif) top left no-repeat; /* Off state image */
/* The “Alice” link, on state */
ul#primary-nav li#nav-alice h2 a:hover
So, what happens is that each LI gets a background image equal to the “on” state, but that’s normally covered up by the anchor which has a background image equal to the “off” state. Then, the :hover pseudo-class for the anchor removes the background image, allowing the “on” state underneath to show through.
As one last bit of code, suppose that you want to have a setting for the “current page” where the “on” state would always be displayed? (For instance, the “Alice” header could always be on while users are in the “Alice” section.) That’s just a matter of adding a comma and another selector to that last rule:
/* The “Alice” link, on state */
ul#primary-nav li#nav-alice h2 a:hover,
ul#primary-nav li#nav-alice h2 a#current-page
To make use of that, just add the ID “current-page” to the anchor tag on any page which you want to have an always-on header. Going on the example HTML from before, that would look like this:
I’m still not sure why IE protested at the use of swapping-backgrounds, but this set of code worked out for us.