13.1.1 Preload Images
The Preload Images behavior ensures smooth rollovers by downloading assets to the cache for quicker access when they are needed. Applying the Preload Images behavior opens the dialog box shown in Figure 13-1, where you can specify one or more image files to preload.
Figure 13-1. Preload Images behavior parameters
Use the plus (+) button to add an item to the list and use the Browse button to select a new file or change an existing file. You can add as many files to this list as you wish, including files that aren't images. However, excessive preloading can increase your document's load time dramatically (and preloaded images aren't reflected in the download time estimate shown in the Document window's status bar).
To preload images when an HTML page loads, attach the Preload Images behavior to the <body> tag and trigger it with the onLoad event. Dreamweaver applies this behavior automatically if you enable the Preload Images checkbox when applying the Swap Image behavior (discussed next ).
To use the Preload Images behavior with files derived from a template, add the Preload Images behavior to the template file.
13.1.2 Swapping and Restoring Images
The Swap Image and Swap Image Restore behaviors combine to create a rollover effect. Applying the Swap Image behavior opens the dialog box shown in Figure 13-2.
Figure 13-2. Swap Image behavior parameters
The Images list in this dialog box shows the names of images in the current document, including images in other frames . This behavior can't be applied unless the document or frameset contains at least one image.
You'll typically apply the Swap Image behavior to an image acting as a button, but it can also be used to create a so-called disjoint rollover in which rolling over one image changes another image, even an image in another frame. Select the image to be replaced from the Images list (images within frames are listed as "Image imageName in Frame frameName "). Specify the replacement image in the Set Source To field; the replacement image is scaled to the same size as the original image, if necessary.
Enable the Preload Images checkbox to preload the replacement image automatically. Enable the Restore Images onMouseOut checkbox to restore the original image when the mouse cursor rolls off the object. Because NN4 can't process events for images directly, Dreamweaver adds the behaviors to the <a> tag encompassing the image, as shown in Example 13-1.
Example 13-1. Wrapping an image in a null link to apply a behavior
If the image acts as a link, the <a> tag's href attribute can be set to any URL. If the <a> tag doesn't exist, Dreamweaver adds it automatically. If the Restore Images onMouseOut checkbox is enabled, the onMouseOut event is used to trigger the Swap Image Restore behavior. If the Preload Images checkbox is enabled, the Preload Images behavior is automatically attached to the document's <body> tag and triggered with the onLoad event..
Rollover effects can also be imported from Fireworks, as described later in this chapter. Rollovers and animation can also be created by changing the src attribute of an image using the Change Property behavior. To create a slideshow, add an image to a timeline and change its src attribute in successive keyframes, as discussed in Chapter 17.
22.214.171.124 Swap Image Restore
The Swap Image Restore behavior restores the most recently swapped image to its original state. This behavior is typically applied automatically when using the Swap Image behavior by enabling the Restore Images onMouseOut checkbox. If you apply the Swap Image Restore behavior manually, apply it to the same element that the Swap Image behavior is attached to. Together these behaviors create the rollover effect seen in Figure 13-3, in which a bullet appears next to the Info menu option when the cursor rolls over it.