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

Adding Behaviors

This exercise demonstrates creating rollovers from 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 using a different method to insert rollovers for images that are already on the page. You will insert the behavior for the rollover using the Behaviors panel. When you are creating 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 can use the method from the previous exercise to set both the original image and the rollover image in one step.

Open the architecture.html from the Lesson_05_Behaviors folder.

The file contains a number of tables and graphics that have already been placed for you, using the techniques you have learned in Lessons 1 through 4.

In the Property inspector, use the image-name text field to name the three images near the bottom of the page as follows: styles_off.gif should be named styles, markings_off.gif should be named markings, and construction_off.gif should be named construction.

Naming the images to match their content or their function is a good method. This naming practice helps to clearly indicate what images are associated with the chosen names.

Select the Styles image. Open the Design panel group and click the Behaviors tab.

The Behaviors panel opens.


You can also choose Window > Behaviors to open the Behaviors panel.

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

The Swap Image dialog box opens. The Swap Image behavior is what creates the rollover effect you used in the previous exercise: it swaps a new image in to replace the original image that the visitor rolled over.

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 causes the action to occur. An event could be the user 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, make sure that the styles image is selected.

The image will be listed as “styles.” This is the name you defined in step 2 for the image that you selected and added an action for in the Behaviors panel in step 4. By selecting the image in the list you are designating that when the user rolls over it, the image will be replaced with 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 styles image. You will do this in the next exercise.

Keep in mind that if you don't name your images, they all appear with the name, “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. In a list full of unnamed images, it can be difficult to distinguish which images you are working with.

Click the Browse button next to the Set Source To text field and find styles_on.gif in the Images folder to use for the rollover image.

Set Source To defines what the rollover image will be. This is the same as choosing the rollover in the previous exercise. Generally, the original appearance of an image is known as the “off” state, and the instance of the rollover when the user moves the pointer over the image and the image changes is known as the “on” state. Images used for the “on” states often look like a button has been pressed or a word has been highlighted to indicate to the visitor that the object is an active or linked element.

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

Click Open (Macintosh OS 9), Choose (Macintosh OS X) or OK (Windows) to pick the image.

After choosing the image, you will be returned 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 check boxes are checked. Then click OK.

The Preload Images option is checked by default and is highly recommended. Loading the images that will swap to replace the originals 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 by the download occurring at the time the user rolls over the image.

The Restore Images onMouseOut option is also checked by default and is recommended. This option makes your swapped 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 Markings and Construction buttons, using markings_on.gif and construction_on.gif for the rollover images that you define in the Set Source to text field.

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

Since you have not yet defined pages for these rollovers to link to, they will display javascript:; in the Link text field when selected. Do not delete this text, it is necessary for the rollovers to function since there is no link defined yet.

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