How to Create a Simple Rollover Image in Dreamweaver - dummies

How to Create a Simple Rollover Image in Dreamweaver

By Janine Warner

Rollovers are such a popular feature that Dreamweaver includes a special dialog box just for rollovers: the Insert Rollover Image dialog box. Rollover images, as the name implies, are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing.

You can create more complex rollover image effects with the Swap Image option from the Behaviors panel. The Swap Image option enables you to change multiple images at the same time.

To create a simple rollover effect with two images using Dreamweaver’s Insert Image Rollover dialog box, follow these steps:

  1. Place your cursor on the page where you want the rollover to appear.

    Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but both should have the same dimensions. Otherwise, you see strange scaling effects because both images must be displayed in exactly the same space on the page.

  2. Choose Insert→Image→Rollover Image.

    Alternatively, you can use the drop-down list available from the Images icon in the Common Insert panel and select Rollover Image.

    The Insert Rollover Image dialog box appears.


  3. In the Image Name box, name your image.

    Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don’t use spaces or special characters.

  4. In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.

    If the images aren’t already in your local site folder, Dreamweaver copies them into your site when you create the rollover.

  5. In the Rollover Image box, enter the image you want to become visible when a visitor moves the cursor over the first image.

    Again, you can use the Browse button to locate and select the image.

  6. Select the Preload Rollover Image check box to load all rollover images into the browser’s cache when the page first loads.

    If you don’t choose to do this step, your visitors may experience a delay because the second image won’t be downloaded until a cursor is rolled over the original image.

  7. In the Alternate Text field, enter a description of the images.

    Alternate text is optional but recommended because the use of keywords can enhance search engine optimization. Similarly, Alternate text is a key part of web accessibility because this text is read aloud by special browsers called screen readers, which are used by people who are blind and others with limited sight or mobility. Alternate text is displayed only in the browser if the images are not visible.

  8. In the When Clicked, Go to URL box, enter any web address or browse to locate another page in your site to which you want to link.

    If you don’t specify a URL, Dreamweaver automatically inserts the # sign as a placeholder in the code.

    The # sign is a common technique for creating links that don’t link anywhere. Because rollover images that don’t link to another page have many great uses, this technique is useful. Just remember that if you do want your rollover to link, you need to replace the # sign with a link to another page.

  9. Click OK.

    The images are set up automatically as a rollover.

  10. To see the rollover in action, save the file and then click the globe icon at the top of the workspace to preview your page in a web browser.

You can see how your rollover works in Dreamweaver’s Design view or by using the Live view option. When you click the Live button at the top left of the workspace, you essentially turn Dreamweaver into a web browser that displays pages much like the Chrome browser.

When you’re previewing a page on your computer that includes a rollover image, some web browsers will display a warning stating that you must allow ActiveX controls to view the page. This is a security warning that appears only when the page is opened on the same computer where the page is saved.

If you publish the page to a web server and then view it over an Internet connection, you and your site visitors will not see this error.

[Credit: Artwork by]
Credit: Artwork by