the Swap Image behavior provides the flexibility to manipulate more advanced features (such as the ability to swap multiple images from one trigerring action) associated with rollover images. Working with the Swap Image behavior is just as easy as working with the Rollover Image dialog but requires a few more steps. To work with the Swap Image behavior, follow these steps: 1. Continuing with the sample.htm page you've been working with, place your cursor just after the previous About Us hyperlink and press Enter. 2. Insert a new image (preferably one that we've been using for the navigation bar) by selecting one of the "up" images located in the Rollovers folder in the Images folder of the project. I'll select home_up.gif and drag it into the page. 3. With the image selected, uniquely identify it by typing the name home in the Image Name text box located in the Properties Inspector. 4. Select the Swap Image behavior from the Add (+) menu in the Behaviors panel. The Swap Image dialog appears similar to Figure 10.29. Figure 10.29. The Swap Image Behavior dialog allows you to create a rollover for an image. [View full size image]   The following functionality is exposed in the Swap Image dialog: Images: Use this list box to select the image for which you want to create a rollover. Because we have only one image on the page, home, it appears as the sole image in the list. It's important to note that the Swap Image behavior is attached to a single object, in our case the Home button. Setting the source to multiple images in this dialog would cause other images to swap states when I rolled over the Home image. If this is not the desired effect, attach a separate Swap Image behavior to each and every element that will have a rollover affect. Set source to: Browse to the file you want to use as the rollover. For our example, we'll browse to the home_over.gif image located in the Rollovers folder in the Images folder of the project. Preload images: A few sections ago, we discussed the Preload Images behavior. In that discussion, I mentioned that preloading images, especially when working with rollover images, is important. Preloading images prevents a user with a slow connection from seeing a broken image for a split second while the secondary image is trying to load when the mouse rolls over an image. I recommend leaving this option checked at all times. Restore images onMouseOut: Disabling this check box causes the image to remain in its rollover state. Enabling this check box ensures that the rollover image returns to its original state when the user's mouse rolls back out of the image. 5. After you've added the correct URL to the Set Source To text box, click OK. 6. Before you test the functionality, make sure that the Behaviors panel lists the onMouseOver event for the Swap Image behavior and the onMouseOut event for the Swap Image Restore behavior. If they're not properly associated, do that now by choosing the correct event. Save your work and test the results in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). Notice that rolling over the image causes the secondary image to appear. Timeline As you'll see in Chapter 17, "DHTML and the Timeline," you can use behaviors exposed by the Timeline submenu in the Behaviors list to add interactivity between elements on the page and animation within a timeline. Behaviors exposed by this submenu include functionality for playing a timeline, stopping a timeline, or going directly to a frame within a timeline. Validate Form