TechNote

Using the Swap Image Restore behavior when swapping multiple images

Using the Swap Image behavior to swap multiple images

Rollover buttons are often used as navigation buttons or to add graphic excitement to a web page. A simple rollover means that one image is swapped for another when the mouse rolls over the initial state of the image. A disjointed rollover is achieved when the mouse rolls over one image and a different image source on the page is swapped. Multiple images may also be swapped simultaneously. For example, as the mouse rolls over an image, the image is swapped (simple rollover) and at the same time, another image is also swapped (disjointed rollover). Both images are swapped as one mouse event (onMouseOver) occurs.

Simple Rollovers are easily created by using the Insert Rollover Image object. For more information about creating simple rollovers, see the Dreamweaver documentation.

Disjointed rollovers add more interactivity, allowing the user to graphically change several images on the page at once. Any number of images can be added to one Swap Image behavior, triggering multiple swap actions when the cursor rolls over the specified image.

Understanding the function of the Swap Image Restore behavior

The Swap Image Restore behavior can be set by two different methods, each resulting in the same code. When using the Insert Rollover Image object, the Swap Image Restore behavior is automatically attached as the original and rollover images are set. The second method involves manually attaching the Swap Image Restore behavior from the Behavior inspector.

When manually attaching the Swap Image Restore behavior, the following alert message appears:

This means that this behavior will swap back (restore) ALL of the "swapped" images onMouseOut. There is no reason to attach multiple Swap Image Restore behaviors, because one will return all the swapped files back to their corresponding original image states.

Creating multiple swapped images using one Swap Image behavior

When creating multiple image swaps, only one Swap Image and one Swap Image Restore behavior are needed. It is not recommended to attach several Swap Image and Swap Image Restore behaviors to the same image, because the events (onMouseOver and onMouseOut) each occur only once as the cursor moves in and out of the specified image area. The images may not swap or restore as expected.

To attach multiple rollover images on one event receiver, do the following:

Create a new Dreamweaver document and save the page inside the local root folder.
Insert the images on the page that will be present as the page loads (the original states before the cursor rolls over). Make sure that all the image source files are located inside the local root folder structure.
Name each image. Selecting the image and enter a valid name in the Property inspector, in the field located to the right of the thumbnail of the image.

Note: It is very important that a valid name is entered for each image BEFORE the behaviors are attached. If the image names are changed, the behaviors must be reapplied. Be sure to follow the correct naming conventions, or the JavaScript may not function. SeeHow to name an image in Dreamweaver (TechNote tn_13282) for more details.
The event receiver image can be inserted by using the Insert Rollover Image object. Indicate the original image and rollover image in the dialog box. This object will automatically attach both a Swap Image and a Swap Image Restore behavior to the original image.

Or, if you prefer, insert the original state of the event receiving image, then manually attach a Swap Image and a Swap Image Restore behavior using the Behavior inspector.
Once the Swap Image behavior has been attached to the event receiver, other image files may also be swapped using the same behavior. Simply select the image, then double-click the Swap Image behavior that appears in the Behavior inspector.
The field marked Images in the Swap Image dialog box contains a list of all the images currently inserted on the page. Select the desired image that will be "swapped" from this list. Next to the field below, click on the browse button and navigate to the rollover state of the image that you wish to set as the rollover image source.
Continue in this fashion, until all the images you wish to swap have been assigned with their corresponding rollover states. Images with the asterisk (*) beside them have already been assigned a rollover image.
Click OK when you are finished.