13.1 Rollover Images

Recall that rollover images can be inserted using Insert figs/u2192.gif Interactive Images figs/u2192.gif Rollover Image (see Figure 2-11). When you insert a rollover image, Dreamweaver inserts the same JavaScript used by the Preload Images, Swap Image, and Swap Image Restore behaviors. (Note that these behaviors have no effect in IE3 on either Macintosh or Windows.)

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.

An <img> tag's name attribute must be set to manipulate the image via JavaScript. Use the Property inspector to assign a unique name to each image on a page.

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
 <a href="javascript:;"     onMouseOut="MM_swapImgRestore(  )"     onMouseOver="MM_swapImage('mybutton','','rollover.jpg',1)">   <img src="starting.jpg"         width="300" height="110"         name="mybutton" border="0"> </a> 

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. 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.

Dreamweaver in a Nutshell
Dreamweaver in a Nutshell
Year: 2005
Pages: 208

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net