Behaviors > Using the behavior actions that come with Dreamweaver > Show-Hide Layers
Behaviors > Using the behavior actions that come with Dreamweaver > 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 the mouse pointer over an image of a plant, you could show a layer that gives details about the plant's growing season and region, how much sun it needs, how large it can grow, and so on.
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 use the Show-Hide Layers action:
| 1 | Choose Insert > Layer or click the Layer button on the Objects panel, and draw a layer in the Document window. |
| Repeat this step to create additional layers. | |
| 2 | Click in the Document window to deselect the layer, then open the Behavior panel. |
| 3 | Click the Plus (+) button and choose Show-Hide Layers from the Actionspop-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 Show Events For pop-up menu. |
|
| 4 | From the Named Layers list, select the layer whose visibility you want to change. |
| 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. (You can change the visibility of multiple layers with a single behavior.) |
| 7 | Click OK. |
| 8 | Check that the default event is the one you want. |
| If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. | |
 |
When viewed in a Netscape Navigator browser window, layers may shrink to fit the content. To keep this from happening, add text or images to layers, or set layer clip values.
To create a preload layer:
| 1 | Click the Draw Layer button in the Common category of the Objects panel and draw a large layer in the Document window's Design view. |
| Be sure the layer covers all the content on the page. | |
| 2 | In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order. |
| 3 | Select the layer if it's not selected, and name it loading, using the leftmost field in the layer 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 visitors what is happening so that they know the page contains content. | |
| 6 | Click the <body> tag in the tag selector in the bottom left corner of the Document window. |
| 7 | In the Behaviors panel, choose 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. |
| 11 | Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is onLoad. (If it isn't, select the event and click the downward-pointing triangle that appears between the event and the action. Choose onLoad from the list of events in the pop-up menu.) |
|
|