Using the Show-Hide Layers Behavior

You can use the Show-Hide Layers behavior to control a layer's visibility and have that visibility change based on the visitors' actions.

1.	Create a new layer above the textlayer, name it yoga, and place the jayne.jpg image inside ituse yoga for the alternative text for the image. Create a second new layer to the right of the yoga layer. Name it details and type the following in the new layer: Learn about a variety of yoga poses in our classes. Your document should look like the following example.
2.	Set the visibility of the details layer to hidden by selecting the layer and choosing hidden from the Vis menu on the Property inspector. Click outside the layer in the Document window to deselect it. Note You can also set the visibility of the layer by clicking in the Visibility column to show the closed eye icon that indicates the layer is designated as hidden. Clicking on the visibility icon in the column for any given layer will change the visibility for that layer. The details layer now disappears.
3.	Select the jayne.jpg image, type # into the Link text field on the Property inspector, and press Return (Macintosh) or Enter (Windows). With the image still selected, click the plus sign (+) button in the Behaviors panel (located in the Tag Inspector panel group) to add a behavior. Choose Show-Hide Layers from the behaviors menu. The Show-Hide Layers dialog box appears with a list of the layers on the page.
4.	Select the details layer from the Named Layers list and click the Show button. Click OK to close the Show-Hide Layers dialog box. When you click the Show button, (show) is displayed next to the details layer in the list on the Show-Hide Layers dialog box.
5.	In the Behaviors panel, click the Event menu and choose <A> onMouseOver from the Event menu. This behavior is now triggered when the visitor rolls over it. Selecting events for behaviors was covered in Lesson 8.
6.	Save the layers.html file and test it in the browser.

Leave this file open for the next exercise.

Tip

If you want the layer to hide again when the visitor scrolls off the image, repeat steps 3-5 choosing "Hide" instead of "Show" in step 4, and choosing "<A> onMouseOut" instead of "<A> onMouseOver" in step 5.