Show-Hide Layers

The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the user interacts with the page. For example, as the user rolls over an image of a plant, you can show a layer that gives details about the plant's growing season and region, how much sun it needs, how large it grows, and so on.

To use the Show-Hide Layers action:

1 Choose Insert > Layer or click the Layer button on the Object palette and draw a layer in the Document window.
Repeat this step to create additional layers.
2 Follow steps 1 through 3 of the procedure in Attaching a behavior.
3 Select Show-Hide Layers from the Actions pop-up menu.
If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link (A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu.
4 Select the layer whose visibility you want to change from the Named Layers list.
5 Click Show to show the layer, Hide to hide the layer, or Default to restore the layer's default visibility.
6 Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time.
7 Click OK.
8 Check that the default event is the one you want.
If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.

Show-Hide Layers is also useful for creating a preload layer—that is, a large layer that obscures the contents of the page at first and then disappears when all the page components have finished loading.

To create a preload layer:

1 Click the Layer button on the Object palette and draw a large layer in the Document window.
Be sure that the layer covers all the content on the page.
2 In the Layer palette, drag the layer name to the top of the list of layers to specify that the layer should be at the top of the stacking order.
3 Name the layer loading in the leftmost text entry field in the Property inspector.
4 With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
5 Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired.
For example, Please wait while the page loads or Loading... are messages that tell users what is happening so that they don't think the page contains no content.
6 Click the <body> tag in the tag selector in the bottom left corner of the Document window.
7 In the Behavior inspector, select Show-Hide Layers from the Actions pop-up menu.
8 Select the layer called loading from the Named Layers list.
9 Click Hide.
10 Click OK.