Create a Database Driven DHTML Menu - Step III
In this step we will apply the necessary JavaScript behaviors on the page.
23. Open the Behaviors Panel (SHIFT + F3) if it is not already open.
24. Click on the <body> tag in the bottom of the Design View window and then the (+) sign in the Behaviors Panel and select Studio VII > autoHide Layers by PVII. In the autoHide Layers by PVII window, use the following settings.
25. Click inside the table in the catSubLayer and then click on the <td.menu> tag in the bottom of the Design View window. Click on the (+) sign in the Behaviors Panel and select Studio VII > DW4 W3C Object Color Changer and use the following settings.
26. Make sure that the event is set to onMouseOver.
27. Click on the (+) sign in the Behaviors Panel and select Studio VII > DW4 W3C Object Color Changer and use the following settings.
28. Change the event to onMouseOut by clicking the small down arrow and selecting onMouseOut from the list.
29. Click on the catSubLayer in the Layers Panel. In the Property Inspector, change the Vis to hidden.
30. Click on the cats.gif in the TrigLayer and then the (+) sign in the Behaviors Panel and select Studio VII > Auto Layers by PVII and use the following settings in the Auto Layers by PVII window.
31. Change the event for the Auto Layers to (onMouseOver), that is onMouseOver in parentheses, by clicking the down arrow and selecting (onMouseOver).
32. Click on the home.gif in the homeLayer and give it the name theHome in the Property Inspector. Now click on the (+) sign in the Behaviors Panel and select Swap Image and use the following settings in the Swap Image window.
33. Make sure that the event for the Swap Image is set to (onMouseOver) and the event for the Swap Image Restore is set to (onMouseOut).
On the next page we will finally get to the dynamic part of this tutorial.