• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Adding User Interactivity > Inserting a Rollover Image

Inserting a Rollover Image

One of the most common uses of JavaScript on Web pages is to create a rollover—an image that changes when the user moves the pointer over it. You can create rollovers in Dreamweaver without ever looking at the HTML or JavaScript code. A rollover is a simple behavior that is included in the Common Insert bar. When you use this method, Dreamweaver creates the behavior behind the scenes.

Create a new document and save it as local_history.html in the Lesson_05_ Behaviors folder. Title the page Lights of the Coast: History: Locations and set the background color of the page to white.

In the following steps, you will create a rollover on this page.

Click in the document window to place the insertion point at the top of the page. In the Insert bar, click the Rollover Image button.

The Insert Rollover Image dialog box opens.

Dreamweaver steps you through the process of creating rollovers in this dialog box. If you haven't initially placed your images on the page, you might prefer this method, because it enables you to insert an image and define it as a rollover at the same time. In the next exercise, you will create rollovers for images that have already been placed on the page.


Alternatively, you can choose Insert > Interactive Images > Rollover Image to insert a rollover image using the same dialog box.

In the Image Name text box, type local for the image name.

The dialog box provides a text field in which you can name the image. If you don't name your rollover images, Dreamweaver assigns generic names automatically in a numeric order: Image1, Image2, etc.… It will be more helpful to you in creating your Web pages if you make it a standard practice to give all rollovers specific and meaningful names that clearly indicate what they are for. When naming your images, don't use spaces or any special characters.

Click the Browse button next to the Original Image text field and find local_off.gif in the Lesson_05_Behaviors/Images folder.

This image will appear on the page before the user rolls over it.

Click the Browse button next to the Rollover Image text field and find the rollover image local_on.gif in the Lesson_05_Behaviors/Images folder.

When this page is viewed in a browser, the visitor will initially see the local_off.gif image. The local_on.gif image will replace the local_off.gif image when the user rolls over local_off.gif in the browser window.


When creating your graphics, make each image with the same dimensions. If you don't, the second rollover image will be resized to the size of the first image. Resizing distorts the second image.

Type Locations in the Alternate Text text field. Click the Browse button next to the When Clicked, Go To URL text field and find the file location.html in the Lesson_05_Behaviors folder. Leave the Preload Rollover Image box checked. Then click OK.

The rollover now links to the file you chose. The URL you chose in the When Clicked, Go To URL text field now appears in the Link text field on the Property inspector when the image is selected.


If you leave the text field blank, Dreamweaver fills it with a number sign (#), otherwise known as a null link, in the Link text field of the Property inspector. The number sign tells the browser to display the pointing-hand when the user rolls over the graphic. The number sign will also cause the browser to stay on the same page if the rollover is clicked in the browser. You can replace the number sign with a link value in order to go to a different page or URL, but do not leave the Link text field in the Property inspector empty, because doing so will remove the JavaScript that creates the rollover.

When the rollover image is selected, the resulting behavior will appear in the Behaviors panel, which you'll use in the next exercise.

Save your file and test it in the browser.

You can close this file.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint