ONLINEGRAPHICPROOFING.COM

proof operator jobs - www.onlinegraphicproofing.com

Menu


over, and down image states, set alternate text, give the element a link, set the layout of the navigation bar, and even set whether or


not the images should preload (covered in the previous section). After we configured the dialog, it looks like Figure 10.19. Figure 10.19. The navigation bar was built using the Navigation Bar dialog. [View full size image]   The beauty in the Navigation Bar dialog is that it allowed us to work with the navigation bar as a whole as opposed to adding individual rollover images five different times as we would have had to do with the Rollover Image option, also available in the Image Object menu on the Insert bar and covered in Chapter 3. TIP You can still work with the navigation bar as a whole by reselecting the Navigation Bar option in the Image Objects menu. Although you're not able to build another navigation bar on the same page (Dreamweaver allows only one "official" navigation bar per page), selecting this option when you have an existing navigation bar reopens the Navigation Bar dialog with your configured values prepopulated.   But what if we wanted to work with individual navigation bar elements within the context of the whole navigation bar? Even better, does a behavior exist for changing a second image on the page to something else while I roll over an element in my navigation bar? The answer is yes! This is where the Set Nav Bar Image behavior comes in. The Set Nav Bar Image behavior, aside from allowing you to work with individual navigation bar elements independently of the others, also allows you to set the image state of a second image anywhere on the page dynamically when you roll over an image in the navigation bar. A perfect example of when you'd want to use functionality such as this is when you're working with a navigation bar of employee names. In the example we'll build, we'll have images that represent the executive team for our fictitious Dorknozzle company. Initially, we'll display Ferris's headshot because he's the founder, but as a user rolls over names in the navigation bar, we'll use the Set Nav Bar Image behavior to dynamically change the headshot for Ferris to the headshot of the person whose name you've rolled over. To do this, follow these steps: 1. Create a new page by choosing the New option from the File menu. The New Document dialog appears. Choose the HTML option from the Basic Page category and click Create. 2. With your cursor on the page, navigate to the Rollovers folder, located in the Images folder for your defined site in the Files panel and drag out the four images titled xferris_up.gif, xagnes_up.gif, xherbert_up.gif, and xpat_up.fig. Give each image a unique name in the Name field in the Properties Inspector. Also, make sure to add line breaks between the images so that the finished version resembles a vertically structured navigation bar similar to Figure 10.20. Figure 10.20. Add the four nav bar images to the page, creating line breaks between them. [View full size image] 3. Add a few more line breaks and drag the head_ferristhefounder.gif image into the page. This image is located in the Images folder of the project. Name the image ferrisheadshot in the Name text box in the Properties Inspector. 4. Select one of the navigation bar images such as Agnes's (xagnes_up.gif) and select the Set Nav Bar Image behavior from the Add Behavior list in the Behaviors panel. The Set Nav Bar Image dialog appears (see Figure 10.21). Figure 10.21. Attach the Set Nav Bar Image behavior to an image in your nav bar. The Set Nav Bar Image dialog appears. [View full size image]