Home > Tutorials > Dreamweaver > Intermediate

Dreamweaver Tutorial 0003 - Creating Rollovers in Dreamweaver using Behaviors.

There are two different ways to add rollovers (images that change as the mouse passes over) to your web pages in Dreamweaver. There is an Insert Rollover feature and a more powerful method that uses Behaviors. This tutorial will cover how to create rollovers using the Behaviors method, with a twist; the button itself will not change, but a different image will.

A few rules before you begin: The images that you will use to create your rollovers will need to be the same size. If you are making rollover buttons and the base image is 150 x 20, the "change-state" image must also be 150 x 20. Whatever image is being swapped must be replaced by an image of the same size.

You will need to download this archive:

dw0003-archive.sit -- 64K

1. Open Dreamweaver. Create a new document. Save the file to the dw0003-archive folder and name it test02.html.

2. In the Page Properties, set the background color to 3333CC and the Text color to FFFFFF. Save the file again.

3. In Dreamweaver, open the nav.html file. This has our base images and buttons for the rollovers. In the EDIT menu, choose Select All, then COPY.

4. Go back to test02.html. Go to the EDIT menu and choose PASTE. Save the file again.

5. Select the button labeled "Launch". Go to the Properties Inspector and name this image "launch". You will need to name all images you intend to use with behaviors. Names cannot contain spaces or special characters, nor can they start with numbers. The rest of the images are already named for you.

6. Make sure the Launch button is still selected. Open the Behaviors palette (F8). Make sure that the "Events for:" item is set to 4.0 Browsers. Click the + button to reveal a list of available behaviors. Select "Swap Image".

7. In the Swap Image window, your current selected image will be highlighted. Change this to "L1". Then, click the browse button to pick the change-state of your image (launch.gif). Click the OK button to continue.

8. Save your file. Preview it in your web browser (F12-key). Pass the mouse over the Launch button. Notice how the image to the right changes.

9. Repeat this process for the remaining 3 buttons as follows:

Destroy button - d1 to destroy.gif

Luna button - lu1 to luna.gif

Nuclear button - n1 to nuke.gif

Preview this again to make sure that the rollovers have the desired effect.

In order to make the button change, select the button from the Images list in the Swap Image dialog and the second image using the Browse button. This is the most common type of rollover.

So, there is a small introduction to using behaviors in Dreamweaver. We will cover other behaviors in later tutorials. Have fun!