Dreamweaver

Apply the Swap Image behavior

The Swap Image behavior swaps one image for another by changing the src attribute of the <img> tag. Use this behavior to create button rollovers and other image effects (including swapping more than one image at a time). Inserting a rollover image automatically adds a Swap Image behavior to your page.

Note: Because only the src attribute is affected by this behavior, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in shrinks or expands to fit the dimensions of the original image.

There is also a Swap Image Restore behavior, which restores the last set of swapped images to their previous source files. This behavior is automatically added whenever you attach the Swap Image behavior to an object; if you leave the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore behavior manually.

  1. Select Insert > Image or click the Image button on the Insert bar to insert an image.
  2. In the Property inspector, enter a name for the image in the leftmost text box.

    It isn’t mandatory to name images; they’re named automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if you name all the images beforehand.

  3. Repeat steps 1 and 2 to insert additional images.
  4. Select an object (generally the image you’re going to swap) and choose Swap Image from the Actions menu of the Behaviors panel.
  5. From the Images list, select the image whose source you want to change.
  6. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To box.
  7. Repeat steps 5 and 6 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
  8. Select the Preload Images option to cache the new images when the page is loaded.

    This prevents downloading delays when it is time for the images to appear.

  9. Click OK and verify that the default event is correct. If not, select another event or change the target browser in the Show Events For submenu.