|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Cross-Browser Layers: Part 2by Budi Kurniawan
Editor's Note: When we published part one of this two-part series on cross-browser layers, a couple readers posted Talk Back messages questioning the timelines of content that discusses how to use layers for older browsers -- especially because Netscape 6 and Internet Explorer 5 now support layers in accordance with the new W3C standards. In essence, the author responded by saying that it's too early to stop supporting the older browsers.
As a result of this discussion, I asked the author to make some adjustments to the second part in the series before publishing. The following text includes those changes. In a sense, I think the dialogue from the previous article represents the larger discussion about coping with evolving standards.
Displaying and hiding a layer
Normally, all layers in your page are hidden by default. Only when the user does something, such as moving the mouse pointer over an image or a hyperlink, will the layer show up. If the user does something else, say move to another image, you might want to hide the first layer and display the second one. In a nutshell, layer programming is just the art of displaying and hiding layers at the right time.
As mentioned in part one of this article, you need to first detect the browser type and version. You can use the
Listing 1: Detecting browser layers support
In the code in Listing 1, the variable
Listing 2: Displaying a layer
The display function will later be triggered by a designated event when you have decided how you should display your layer and have the complete HTML file. The function is still safe even in a browser that does not understand layers because in that browser, the code in the two
To control the visibility of a layer, you need to know how to refer to the layer from your script and how to change the value of the
However, layers are also stored as arrays of the document object, so you can use array indexing and naming techniques to access that layer object:
To change the
In Internet Explorer 4 and above, the Document Object Model provides a way to transcend any hierarchical structure of nested style objects with a document property called
And to access the
With this in mind, displaying a layer can be done in only one line of code in both browsers. The code in Listing 3 is working code for displaying a layer.
Listing 3: Code for displaying a layer in both Netscape and Microsoft browsers
To hide a layer, you need to set the
Listing 4: Hiding a layer
Now that you have the function for displaying and hiding layers, you need an event handler that will trigger the