Image Rollovers in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

In Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, you can insert image objects, including image placeholders, rollover images (images that change when a viewer rolls the mouse over the image), navigation bars, and Fireworks HTML. You access these image objects by choosing Insert→Image Objects.

1Create the images to be used as the rollover.

You can generate these images in Fireworks, Illustrator, Photoshop, or any other application capable of saving images optimized for the web.

2Place the cursor on the page wherever you want the rollover to appear.

Choose Insert→Image Objects→Rollover Image or click the Rollover Image button in the Insert panel. The Insert Rollover Image dialog box.

3Name the image.

Type an image name without spaces in the Image Name text field. This name is used in the script creating the rollover.

4Click the Browse buttons.

The Browse button is to the right of the Original Image and Rollover Image text fields. Locate the image that you want to appear as a default on the page and the image that appears only when someone hovers the mouse over the image.

5Leave the Preload Rollover Image check box selected.

This option downloads the rollover image when the page is downloaded to avoid delays in rollovers.

6Describe the Image.

Type appropriately descriptive alt text in the Alt text field.

7Complete the When Clicked, Go to URL text field.

This directs Dreamweaver where viewers are directed when they click the rollover image. You can either click the Browse button to locate another page in your site or enter a URL. Note: If you are linking to a different Web site, you need to include the http:// prefix at the beginning of the URL.

If you don’t yet have a real link to use for a button or hyperlink, you can enter a pound sign (#) to create a dead link. The link or button appears clickable but doesn’t go anywhere when clicked. This option is better than hitting the space bar to create an empty space as a link, as that will display a Page Not Found error when clicked.

8Click OK.

The rollover image is created on the page.

9Preview the Image.

To preview the new rollover image, choose File→Preview in Browser or click the Live View button on the Document toolbar.