How to Create Swaps with Multiple Images in Dreamweaver

Before you start creating a more complex page design with Dreamweaver’s Swap Image behavior, look at a finished page. With the Swap Image behavior, you can replace any or all images on a page.

When you use the Swap Image behavior, it’s important to make all images that you will swap the same size (height and width). If the images are not the same size, all images except the first one will be stretched or compressed to fit the space taken up by the first image inserted into the page.

If you’re using the Swap Image behavior with a series of images that are not all the same height and width, you have a few of options:

Crop the larger ones so that all images are the same size.

Make horizontal and vertical images take up the same space in your design by combining two vertical images for every horizontal one. Simply create a file in a program such as Photoshop, insert two vertical images into the same file side by side, and then size that image so that the file is the same size as one horizontal image.

Create one image file the size of your largest image, set the background to a neutral color, such as black or white, and then insert all other images onto the background so that you can save them all with the same file size.

Follow these steps to use the Swap Image behavior:

1

Create a page design with all the images you want displayed initially.

Each of the three photos in the page design for the Tower Bridge in London has two copies: one thumbnail and one larger version. When the page first loads in a web browser, all three thumbnail images are positioned on the bottom of the page, with the first of the corresponding larger versions displayed in the main area just above the thumbnails.

2

Name your images in the Property inspector.

To target your images with JavaScript, which is how behaviors work, first give each image a unique ID. The image ID isn’t the same as the image filename or the text <alt> tag, although you can use the same or similar names. Image IDs should not have spaces or any special characters.

3

Choose Window→Behaviors.

The Behaviors panel opens. You can drag the Behaviors panel elsewhere on the page, and you can expand it by dragging its bottom or side. You may also want to close any other open panels to make more room by clicking the dark gray bar at the top of any panel.

4

Select an image.

Select the image in the page that will serve as the trigger for the action.

5

Choose the Swap Image behavior.

With the trigger image selected in the workspace, click the plus sign in the Behaviors panel to open the drop-down list of actions, and choose the action you want to apply.

6

Specify the images to swap in the Swap Image dialog box.

In the Images list, select the ID for the image that will be replaced. Click the Browse button to select the image that replaces the main image. If the image is not already saved in the local site folder, Dreamweaver will offer to copy it there for you.

7

At the bottom of the Swap Image dialog box, select the Preload Images option to instruct the browser to load all images into the cache when the page is loaded.

If you don’t select this option, a delay may occur when the image swap is used.

8

If you want, deselect the Restore Images OnMouseOut option.

The Restore Images OnMouseOut option means that when an event is completed (such as when the mouse is moved off the triggering thumbnail), the original image is replaced. By default, Dreamweaver preselects this option for the Swap Image behavior. You may want to deselect this option if you find that replacing the original image each time you roll the cursor over another thumbnail is distracting.

9

After you specify all the settings for the behavior, click OK.

The new behavior appears in the Behaviors panel.

10

Specify an event for the behavior.

After the action is applied, you can go back and specify which event will trigger the action. By default, Dreamweaver applies the OnMouseOver event when you use the Swap Image action, but you can change that event to any available one, such as OnClick, which requires that the user click the image to trigger the Swap Image action.

11

Apply additional behaviors.

To apply the Swap Image behavior to other images on a page, repeat Steps 5–10, clicking to select the image you want to serve as a trigger and then specifying the corresponding image that should be swapped.

12

Test your work in a browser.

You can’t see the effects of behaviors like this one until you click the Live view button at the top left of the workspace in Dreamweaver or preview your page in a web browser.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com