Using the Behaviors Panel

In order to add interactivity to your site, you'll want to add behaviors to the objects on your pages, such as images and links. You'll use the Dreamweaver Behaviors panel to add, modify, and remove behaviors. Objects can have multiple behaviors attached, so you'll also need to know how to rearrange their order.

To add a behavior:

1.	If the Behaviors panel is not visible, choose Window > Behaviors (Shift-F4).
2.	Select an object on the page such as an image or a text link.
3.	Click the plus button on the Behaviors panel to see the list of available actions for the selected object ( Figure 12.1 ). If a choice is grayed out, that action is not available for the object selected. Click to choose an action. Figure 12.1. The Behaviors are shown in black if they are available for the particular element you chose, and in gray if they aren't. You can't select a grayed-out behavior.
4.	The dialog for the chosen action opens ( Figure 12.2 ). Enter the requested information in the dialog. Figure 12.2. The Go To URL dialog is nice and simple. If you're using frames , frame names appear in the Open in box.
5.	The default event for that action is displayed in the events column on the left-hand side of the Behaviors panel ( Figure 12.3 ). If you want a different event, select it from the pop-up menu in the events column ( Figure 12.4 ) by clicking on the default. Figure 12.3. The Behaviors panel shows the event handler and the behavior name . Figure 12.4. If you want to change the event handler, click the event. An arrow appears, and clicking it brings up the pop-up menu.

To edit a behavior:

1.	Select an object with a behavior attached.
2.	Double-click the behavior name in the behaviors column of the Behaviors panel. or Select the behavior name and press Enter (Return). The dialog window for the behavior will open.
3.	Change any parameters and click OK.

To change the order of behaviors:

If more than one behavior is attached to an object, the behaviors run in the order listed in the Behaviors panel, from the top to the bottom ( Figure 12.5 ). Select an action and use the up or down arrow to change the order.

Figure 12.5. Any behaviors attached to an element execute in the order they are listed in the Behaviors panel.

To delete a behavior:

1.	On your Web page, select an object with an attached behavior.
2.	In the Behaviors panel, select the name of the behavior you want to delete.
3.	Click the minus button . or Press Delete.

Tips

You can extend Dreamweaver by adding additional behaviors from the Macromedia Exchange. See "Finding and Installing Extensions" in Appendix B for more information about extending Dreamweaver.
JavaScripts you write yourself can be inserted in Dreamweaver. To learn more about JavaScript, check out another of our books: JavaScript for the World Wide Web: Visual QuickStart Guide (Fifth Edition) (Peachpit Press).

Events and Browsers

JavaScript includes many event handlers such as onClick or onDblClick , as seen in Figure 12.4. The name of the event handler is usually pretty descriptive of the user event involved.

Not every browser understands every event. Dreamweaver gives you a say as to the browsers you want to choose events for ( Figure 12.6 ). For instance, Set Nav Bar Image is available when you pick Netscape 6, but not when you choose HTML 4.01. Choose Show Events For in the Behaviors panel list of actions to specify your choice of browser or browsers.

Figure 12.6. When you select Show Events For, you can choose from a list of browsers.

Events can only be applied to certain tags. See Table 12.2 for specific event names and associated tags.

Table 12.2. Not all events available in Dreamweaver are listed. Some event handlers available in JavaScript are not available in Dreamweaver.

Dreamweaver Event Handlers
E VENT	T RIGGERED WHEN	A SSOCIATED WITH
`onAbort`	The user stops the browser from completely loading the object	document, images
`onBlur`	A field loses focus	form fields
`onChange`	The user changes a default value on the page	form fields
`onClick`	The user clicks an object	links, form
`onDblClick`	The user double-clicks an object	links, images
`onFocus`	A field gains focus	form fields
`onHelp`	The user clicks F1 or something labeled Help	links, images
`onKeyDown`	The user presses a key on the keyboard	form fields
`onKeyPress`	The user presses any key	form fields
`onKeyUp`	The user releases a key	form fields
`onLoad`	When a page, frameset, or image finishes loading	document, images
`onMouseDown`	The user presses the mouse button	links, images
`onMouseMove`	The user moves the mouse	links, images
`onMouseOut`	The user moves the mouse off a selected object	links, images
`onMouseUp`	The user releases a mouse button	links, images
`onMouseOver`	The user points the mouse at an object	links, images
`onReset`	The user clicks a form reset button	forms
`onResize`	The user resizes the browser window	document
`onScroll`	The user scrolls up or down	document
`onSelect`	The user selects text in a form field	form fields
`onSubmit`	The user clicks the Submit button in a form	forms
`onUnload`	The user leaves a page	document

Figure 12.1. The Behaviors are shown in black if they are available for the particular element you chose, and in gray if they aren't. You can't select a grayed-out behavior.

Figure 12.2. The Go To URL dialog is nice and simple. If you're using frames , frame names appear in the Open in box.

Figure 12.3. The Behaviors panel shows the event handler and the behavior name .

Figure 12.4. If you want to change the event handler, click the event. An arrow appears, and clicking it brings up the pop-up menu.

Figure 12.5. Any behaviors attached to an element execute in the order they are listed in the Behaviors panel.

Events and Browsers

Figure 12.6. When you select Show Events For, you can choose from a list of browsers.

Table 12.2. Not all events available in Dreamweaver are listed. Some event handlers available in JavaScript are not available in Dreamweaver.