Image Rollovers in Adobe CS5 Dreamweaver

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.

1

Create 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.

2

Place 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.

3

Name the image.

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

4

Click 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.

5

Leave the Preload Rollover Image check box selected.

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

6

Describe the Image.

Type appropriately descriptive alt text in the Alt text field.

7

Complete 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.

8

Click OK.

The rollover image is created on the page.

9

Preview the Image.

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

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

Inside Dummies.com