Creating a rollover in Dreamweaver.

Open the index page for the Pet Pal site.

We will place the rollover in the left column underneath our introductory text.

Select Insert > Image Objects > Rollover Image from the menu bar.

The Insert Rollover Image dialog box appears. Type an image name in the Image name field. This name is used in the script creating the rollover. For this rollover, we use the name "Rollover Rover".

Next we will use the Browse button to locate the original image which is the default image on the screen, and the rollover image.

Select the Original image and click OK.

Select the Rollover image, and click OK.

Leave the Preload rollover image checkbox selected. This option downloads the rollover image when the page is downloaded to avoid delays in rollover.

In the next field, type descriptive alternative text. In this case we will type "information on pet sitting services."

In the "When clicked, Go to URL" text field, 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 will need to include the complete web address.

Sicne we want this to link to the pet sitting page in our site...

...browse to petsit.html in your site folder.

Click OK.

Now in the Insert image rollover dialog box, also click OK.

The rollover image is created on the page. Using Dreamweaver to do this type of rollover saves a lot of time. The rollover you created is written out automatically in Javascript.

Take a look at Code view within the