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

Adding Behaviors

This exercise demonstrates defining rollovers for graphics that have already been placed on the page. The result is the same as the last lesson—an image will swap to show a different image when the user rolls over it. In this exercise, however, you are defining rollovers for images that are already on the page, and you are using a different method to do so. You will now insert the behavior for the rollover using the behaviors panel. When you create your own Web pages, if you have already placed your original images on a page, you should use this method. If you haven't, you should use the method from the previous exercise to set both the original image and the rollover image in one step.

Open the disjointed.htm file in the Lesson_05_Behaviors folder.

The file contains a table with some graphics already placed for you.

In the property inspector, name all the images.

A good method is to name the images to match their functions. You could use “biking” for the Biking image with the white arrow, “bikingad” for the Biking Adventures image, “kayaking” for the Kayaking image with the white arrow, and so on.

Select the Biking image (with the white arrow) and click the Behaviors button in the mini-launcher at the bottom of the document window. Alternatively, you can choose Window > Behaviors.

The Behaviors panel opens. The title bar of the panel shows you have an image selected by displaying Behaviors – <img> Actions.

In the Behaviors panel, click the plus-sign (+) button and choose Swap Image from the Actions drop-down menu.

The Swap Image dialog box opens.

An action is what happens as a result of user interaction. When you select an action, Dreamweaver adds that action to the list in the Behaviors panel. The Actions drop-down menu displays or disables actions depending on what element you have selected in the document window.


Dreamweaver also adds an appropriate event (or events) for that action automatically. The event is what happens to cause the action to occur. An event could be the user's rolling over an image or clicking a button, for example. For rollovers, Dreamweaver uses onMouseOver events by default. You will learn to change the events later in this lesson.

In the Images list, select the biking image.

The image will be listed as “biking.” This is the image you selected in the document window and are adding an action for in the Behaviors panel. By selecting the image in the list, you are designating that, when the user rolls over it, the image it will be replaced with is the rollover image. You will choose the rollover image in the next step. If you were to choose a different image from this list, that image would be replaced with the rollover image when the user rolls over the biking image.


If you don't name your images, they all appear as unnamed (img) in this dialog box. This is why it is so important to name your images properly; it is very hard to work with behaviors if the images are not clearly and logically named.

Click the Browse button next to the Set Source To text box. Find bike_f2.gif in the Disjointed folder to use for the rollover image.

All the rollover graphics you will use for this exercise are in the Disjointed folder, and the names of the rollover-image files have the suffix _f2.

Set Source To defines what the rollover image will be. This is the same as choosing the rollover in the previous exercise.

Click Select (Windows) or Open (Macintosh) to pick the image and return to the Swap Image dialog box.

An asterisk appears at the end of the image name in the Images list to indicate that an alternative image has been assigned to it for the rollover.

Make sure that the Preload Images and Restore Images onMouseOut checkboxes are checked. Then click OK.

The preload option is checked by default and is highly recommended. Loading the images along with the rest of the page when it is first called up by the browser will make your rollovers happen quickly. This setting eliminates any lag caused when the download occurs at the time the user rolls over the image.

The restore option is also checked by default and is recommended. This option makes your images revert to the original images when the user rolls off them. You will notice that Dreamweaver lists this option as a separate action in the Behaviors panel.

Repeat steps 3 through 8 for the Kayaking and Surfing buttons.

If you ever need to delete a behavior, you can select the object that contains the behavior, select (in the Behaviors panel) the action you want to delete, and then click the minus-sign button (–), or you can press Delete (Macintosh) or Backspace (Windows).

Save your file and test the rollovers in your browser.

The images change when you roll over them.

The next exercise demonstrates assigning two swap images to the same user event.



Not a subscriber?

Start A Free Trial

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