Fun with CSS Style Sheets, Part 2: Style-ish Rollovers

 

The following Navbar code is provided using CSS styles for the link text and for the table cells themselves, resulting in a fairly clear navigation bar.

 

Once a style is applied to an object in your page, the properties of that style can be overridden, either directly in the HTML code, or even on-the-fly using Javascript.

Here, we add a bit of Javascript to the table cells to provide a very efficient rollover behavior. The code for Navitem 1 shows directly what was done, while the code for the other navitems uses a Javascript function. Using the function lets you abstract the behavior so that you only have to change the code once to make a change.

The combination of the NavOver() and NavOut() functions and the table cell styles are the basis for a very powerful navigation template. You can write this code now, and determine the exact look later without changing the code. Since NavOver and NavOut can manipulate any of the properties of the styles, this lets you do a lot of things with the look and feel.

In the case below, our NavOver and NavOut functions manipulate the property style.background, rather than the property style.backgroundImage. If there is some transparancy in the image, the backgroundColor will poke through as well. In this case, we used an animated GIF for the rollover: