There's a problem faced by all Web designers: making a menu look interesting without taking forever to load.

Many modern applications address this problem using active menus that indicate where the mouse is by changing the color of the menu items as the mouse cursor passes over them. (Pull down any standard menu on a Windows machine to see this in action.) On Web pages this is often done by a JavaScript application that swaps images, but this technique is slow, and it doesn't work in all browsers.

In this article I'll show how to build this kind of active menu with text, not graphics. This "change style on hover" feature is built into Dynamic HTML in Microsoft Internet Explorer, but in Netscape Communicator 4 this trick requires cascading style sheets, layers and JavaScript. This technique saves download time by using text menus instead of images. There's only one connection from the client to the server, and the text is much smaller than an image of text, even with a few hundred bytes of JavaScript. In addition, since the entire menu is in one HTML file, configuration control is easier when you need to update your menu.

The Easy Way
Doing this in Microsoft Internet Explorer 4 is easy, thanks to style sheets. There's a quick example shown in Listing 1.

There are three things to notice here. First, we're using cascading style sheets, as described at www.microsoft.com/msdn/sdk/inetsdk/help/dhtml/dhtml.htm.

Second, the STYLE tags use HTML comments, !-- and --, to hide the style descriptions from older browsers.

Third, the hover pseudoclass is defined with a gray background and italic font. See www.eu.microsoft.com/msdn/sdk/inetsdk/help/dhtml/references/css/hover.htm for details.

But this doesn't work in the most popular browser, Netscape 4. To do this, we need to mix several techniques: a little JavaScript, Netscape's inline layers and style sheets.

The Hard Way
Unfortunately, Netscape 4 doesn't allow you to change the style of an element on a page after it's been rendered on the screen, so this hover thing doesn't work. But it does let you change the contents of layers at any time. See http://developer.netscape.com/docs/manuals/communicator/dynhtml/contents....

Each element of the following JavaScript application works in both MSIE 4 and Netscape 4, and is downward-compatible with other browsers, as seen in Listing 2, instead of having a link as in Listing 3.

In MSIE and older versions of Netscape, the onMouseOver event triggers the JavaScript make_bg_gray() function, but because the global var do_the_layers is zero, this will do nothing. (Same with make_bg_null().) MSIE 4 will activate its hover pseudoclass normally, giving us the same effect as in the simple previous example.

But Netscape 4.0 (and any other JavaScript-compatible browser supporting layers) will use the onMouseOver and onMouseOut events to trigger make_bg_gray() and make_bg_null() to change the background color of the inline layer (ILAYER). Slow computers like my old 486 don't always trigger the onMouseOut event, so we always turn the background back again three seconds after entry. Setting the background color to null instead of document.bgColor makes the area transparent, in case you're using a background image on the page. (Because of the way we styled the hover pseudoclass, MSIE 4 will show the text as italic on hover; Netscape 4 will not.)

Unfortunately, a bug in the X Window System/SunOS version of Netscape 4 makes it crash when this code is invoked, so we've put in a little guard code, showing why it's always good practice to test your JavaScript code under all available browsers.

Conclusion
This little program demonstrates some of the advanced features of MSIE 4 and Netscape 4, while retaining backward compatibility with older browsers. If you find a use for these active menus or the techniques you've learned here, drop me a line.