Show and hide the drop-down menu

Now your navigation bar is almost complete. We’ll add actions to the image you’re using as the text portion of the navigational button (“About Us” in the illustrations) and to another image on the page to show and hide the drop-down menu so that its associated images appear when you move your mouse over the navigational button and disappear when you move your mouse over another button on the page.

First, you’ll add actions to the image you’re using as the text portion of the navigational button. Notice that you add the actions to the image, not to the layer that contains the image.

1. Select the image you’re using as the text portion of the navigational button in the first layer. Be sure to select the image and not the layer. If you’ve correctly selected the image, the Inspector will be the Image Inspector.

   

   Selecting the image you’re using as the text portion of the navigational button

2. In the Image Inspector, click the Link tab, and enter # as a placeholder.

   

3. In the Rollovers and Actions palette, select the Actions tab.

   

   Entering a placeholder link and selecting a Mouse Enter action

4. In the Actions tab, under Events, select Mouse Enter to specify an action to occur when the mouse moves on top of the button. Then click the Create New Item button to add an action to the Actions list box.

   

   Choosing Show/Hide action and Show mode

5. From the Action pop-up menu, choose Multimedia > ShowHide. From the Layer pop-up menu, choose the layer that contains the drop-down menu (we named the layer Navigation earlier in the tutorial). From the Mode pop-up menu, choose Show. This action shows the drop-down menu when the mouse enters the image that contains the text portion of the navigational button.

6. To hide the drop-down menu, select another image on the page (for example, the Trilobites text image shown in the illustrations). In the Actions tab of the Rollovers & Actions palette, under Events, select Mouse Enter. Then click the Create New Item button to add an action to the Actions list box.

7. From the Action pop-up menu, choose Multimedia > ShowHide. From the Layer pop-up menu, choose the layer that contains the drop-down menu (we named the layer Navigation earlier in the tutorial). From the Mode pop-up menu, choose Hide. This action hides the drop-down menu when the mouse moves over the image you selected in step 6.