Introduction

To use Behaviors we need some background information about what they are. A behavior is a combination of events and actions.

An example of an event is moving the mouse pointer over an image.  Loading of an HTML page  is also an event. 

Actions only happen when the event occurs.  The action and the event are coupled together.  Without the event, the action does not occur. 

Creating behaviors is usually accomplished by programming in JavaScript.  You select the behavior and Dreamweaver inserts the JavaScript programming.  Dreamweaver incorporates JavaScript programming in HTML pages for you.  You are not required to learn JavaScript.

An example of a behavior we might want is the following: When a student moves the mouse over a link (event), the status bar shows some useful information (action).

You can attach behaviors to an entire document, to links, images, form elements, layers, or almost any HTML element.

There is a behavior attached to the image below. When the mouse is over part of the graphic, the status bar changes to read "this is a cup of coffee". When the mouse moves out, the status bar text is removed.

Creating a Behavior (an event and an action)

Select the image by clicking it. The black selection handles will appear. Note that you can apply behaviors to many other objects in much the same way. 

Note: if you do not select an object or element first, no list of events will appear in the events window. Depending on the type of element selected, the list of events will be different.

Make sure the Behaviors window is open. If it is not, from the Window menu, select Behaviors.

From the Browser drop down box select a browser for which you wish to create a behavior.

Click the + button to view the actions that are associated with images. Select the action that you want to occur.

Once you have selected an action, the default event associated with that action appears in the Behaviors box.

To change the event that triggers the action, select the action, then click the down arrow next to the event.

Save your file and use the File menu, Preview in Browser to test the results.

Activity------------------------------------------------

Open a new Dreamweaver document. 

Insert an image from the samples available to you.  To insert an image, from the Dreamweaver Insert menu, select Image.

From the list of browsers for which you can apply behaviors, select 4.0 Browsers. 

From the available actions, select Display Status message.  Type in the message you want to appear. 

The default event is onMouseDown. We want to change this so that the Status Bar message appears when the mouse is moved over the image. In the Behaviors window, select the Display Status Message action. Click the down arrow next th the event and choose onMouseOver.

Save your file and test the results by selecting Preview in Browser.  Test both available browsers, Netscape and Microsoft Internet Explorer.

Note that selecting version 3 browsers will present you with a smaller list of events and actions from which to choose.  Selecting only IE4 may present you with a larger list.

Note also that there may be different behaviors that you can create for use with Netscape and with Microsoft Internet Explorer.  The two browsers implement HTML 4 differently.

Return