How to Create Rollovers in Adobe Dreamweaver CS6 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

In Adobe Dreamweaver CS6, 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.

To create a rollover image, follow these steps:

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. For best results, create images that are the exact same width and height.

2Place the cursor on the page wherever you want the rollover to appear and choose Insert→Image Objects→Rollover Image or click the Rollover Image button in the Insert panel.

The Insert Rollover Image dialog box appears.

3Type 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 to the right of the Original Image and Rollover Image text fields to locate the image that you want to appear as a default on the page.

The image appears only when someone hovers the mouse pointer 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.

6Type appropriately descriptive alt text.

Of course, you would type it in the Alt text field.

7In the When Clicked, Go to URL text field, tell Dreamweaver where viewers are directed when they click your rollover image.

You can either click the Browse button to locate another page in your site or enter a URL.

If you are linking to a different website, you need to include the http:// prefix at the beginning of the URL. If you leave this blank, Dreamweaver will add a dead link (#) automatically.

8Click OK.

The rollover image is created on the page.

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

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 pressing the space bar to create an empty space as a link, because that link will display a Page Not Found error when clicked.