ONLINEGRAPHICPROOFING.COM

proof test how - www.onlinegraphicproofing.com

Menu


5. The Set Nav Bar Image dialog is split into two tabs. The first tab, Basic, contains the same customizable properties that the Navigation


Bar dialog does. Because you should already be familiar with the options in this tab, go ahead and set the Over images by selecting the appropriate images for the over state. These images are located in the Rollovers folder located in the Images folder of the project. 6. Switch to the Advanced tab, where you can dynamically set the image that should appear in place of the existing headshot when a user rolls over the specific nav bar image. Because we're attaching this behavior to Agnes's nav bar image and not to Ferris's nav bar image, select the ferrisheadshot option from the Up Image list box. 7. Browse to Agnes's headshot in the To Image File text box. The image is located in the Images folder of the project. 8. Click OK. To test the functionality, save your work and preview your page in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). Notice that rolling over Agnes's nav bar image changes Ferris's headshot to Agnes's. Rolling out of her nav bar image causes the headshot to return back to normal (to Ferris's headshot). To finish off this page, return to Dreamweaver and repeat steps 48 for the other three images in the navigation bar. Set Text You can use the Set Text set of behaviors to dynamically set text values within a frame, a layer, the browser's status bar, and a text field. Recall that we did something similar with the Change Property behavior. When a user clicked a button, that action set the value of a text box to read Hello World. Earlier in this chapter, we accomplished this functionality using the Change Property behavior, but we can accomplish the same goal, easier, using the Set Text of Text Field behavior. Because we've already looked at that functionality, the following steps explore setting the text of the browser's status bar instead of a text box: 1. Reopen or switch back to the sample.htm page that you've been working with and place your cursor just after the previous Play Sound button; press Enter. 2. Insert a new Button form object by selecting the Button icon located in the Forms category of the Insert bar. Give the new Button the text label Set Text of Status Bar and change the Action to None to prevent the form from submitting or resetting. 3. With the Button selected, choose the Set Text of Status Bar behavior from the Set Text submenu of behaviors available by clicking the Add (+) button in the Behaviors panel. The Set Text of Status Bar dialog appears. 4. In this dialog, enter the message that should appear in the status bar when the user clicks the button. For this example, enter the text Hello World and click OK. 5. Ensure that the onClick event is attached to the Button. Save your work and test the result in the browser by choosing the Preview in Browser option from within the Document bar (or by pressing F12). When the page appears, click the Set Text of Status Bar button. Immediately the text in the status bar changes to read Hello World. Show and Hide Pop-Up Menu Arguably one of the most feature-rich pieces of functionality included with Dreamweaver are the Show and Hide Pop-Up Menu behaviors. You can use these behaviors to create text-based pop-up menus similar to the ones shown in Figure 10.22. Figure 10.22. ESPN's website displays a navigation bar of elements. Rolling over those elements opens a pop-up menu with more choices. [View full size image]   The ESPN website shown in Figure 10.22 displays numerous links that span horizontally across the top of the page. Rolling over each of the navigation