Dreamweaver CS4 Resources
|
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.
- Select Insert > Image or click the
Image button on the Insert panel to insert an image.
- 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.
- Repeat steps 1 and 2 to insert additional images.
- Select an object (generally the image you’re going to
swap) and choose Swap Image from the Add Behavior menu of the Behaviors
panel.
- From the Images list, select the image whose source you
want to change.
- Click Browse to select the new image file, or enter the
path and filename of the new image in the Set Source To box.
- 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.
- 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.
- 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.
|