TechNote

Using the Show-Hide Layers behavior

This tutorial-style TechNote demonstrates how to assign a Show-Hide Layers behavior to a link. In this example, the layer will be set to appear when the link is moused over and disappear when the mouse is no longer over the link.

Attaching the Show-Hide Layers behavior to a link

1. Choose File > New to open a new document.
2. Type text (such as "Link") in the Document window. The text will act as the trigger to activate the showing of the hidden layer.
3. Select the text you typed in Step 2. In the Link text box on the Property inspector type the following:
   
   javascript:;
   
   Note: This converts the text to a null link, which is a necessary step before you add the JavaScript behavior. See Applying JavaScript behaviors to text links (TechNote 15495).
4. Choose Insert > Layer.
5. Click inside the layer and type text (such as "magic layer").
   
   Note: You can insert an image into the layer instead of typing text.
6. Next, you will set the layer to be hidden. Choose Window > Layers to open the Layers panel if it is not already open.
7. On the Layers panel, click to the left of Layer1 (below the eye icon) to hide the layer.
   
   Note: A closed eye icon will appear when the layer is set to be hidden.
8. Choose Window > Behaviors to open the Behaviors panel if it is not already open.
9. Select the text you typed in Step 2 (which is now a null link).
10. On the Behaviors panel, click the Plus (+) button and select Show-Hide Layers in the Action pop-up menu.
11. In the Show-Hide Layers dialog box, click Show.
12. Click OK.
13. On the Behaviors panel, select the Show-Hide Layers behavior. Click the down arrow and select onMouseOver.
    
    Note: If you do not see onMouseOver or the selection is very limited in the pop-up menu, select Show Events For > 4.0 and Later Browsers.
14. On the Behaviors panel, click the Plus (+) button and select Show-Hide Layers in the Action pop-up menu.
15. In the Show-Hide Layers dialog box, click Hide.
16. Click OK.
17. On the Behaviors panel, select the top Show-Hide Layers behavior (by default, it will show the onClick mouse event). Click the down arrow and select onMouseOut.
18. Save your page.
19. Choose File > Preview in Browser to test the behavior.

You should see the layer appear when your mouse is over the link and it should disappear when the mouse leaves the link. Note that you can set any available event for this behavior.

Search Support

---