Dreamweaver MX: The Missing Manual

Hiding and Showing Layers

Do you ever stare in awe when a magician makes a handkerchief disappear into thin air? Now you, too can perform sleight of hand, right on your very own Web pages, making layers disappear and reappear with ease. Although it’s not magic, Dreamweaver’s Show-Hide Layers behavior is undoubtedly a nifty piece of JavaScript programming.

Show-Hide Layers takes advantage of the Visibility property of layers on your page. You can use it for things like adding pop-up tooltips to your Web page, so that when a visitor’s mouse moves over a link, a layer appears with a more detailed explanation of where the link goes (see Figure 12-8).

Figure 12-8.  Using Dreamweaver’s Show-Hide Layers behavior, you can make layers appear and disappear. In this example at http://www.safetreekids.net/awesome/parts.html, several layers lie hidden on the page. When a visitor moves the mouse over different parts of the tree cross-section, informative graphics, each placed in a hidden layer, suddenly appear. Moving the mouse away returns the layer to its hidden state. Notice how the information bubble overlaps the tree image and the text above it—a dead giveaway that this page uses layers.

The following steps show you how to create this remarkable special effect. Note, however, that the process requires some familiarity with Dreamweaver Behaviors, which are described in Chapter 11. For example, ...