| Scripts give you the power to specify actions that should occur when certain events happen on the screen. For example, a simple script might change a graphic when the viewer passes her mouse pointer over it. Such scripts are most often JavaScript (or some version thereof) but can be Visual Basic Script (VBScript) or other languages. Scripting, along with HTML and CSS, comprises the combination of technologies we refer to as "Dynamic HTML" or DHTML. Understanding JavaScript Dreamweaver can react to many types of browser events. Table 10.1 provides a sampling. Table 10.1. A Few Common Event Handlers | Event Handler | Event | | onBlur | Element is deselected. | | onClick | Element is clicked. | | onKeyPress | Any keyboard key is clicked. | | onLoad | An element loads (including the Web page). | | onMouseOut | Mouse pointer passes out of an element. | | onMouseOver | Mouse pointer passes over an element. |
If you want to create your own JavaScript code, you can use the Script icon in the Insert panel's HTML tab. If you aren't a JavaScript programmer yourself, never fear: Dreamweaver can take much of the drudgery out of adding JavaScript functions to a Web page. The program offers two features for this purpose: snippets , which allow you to add and customize preprogrammed chunks of JavaScript, and behaviors , which allow you to quickly add common actions for a variety of common events. Using JavaScript Snippets Snippets are self-contained JavaScript code fragments and functions that perform common tasks , including everything from displaying interactive "tool tips" to opening a new pop-up window (see Figure 10.1). Macromedia has tested the snippets to ensure cross-browser compatibility, but you should do your own testing to be sure. Figure 10.1. The code snippet panel. Each snippet has a brief description to the right of its name . 
Using Behaviors Dreamweaver also offers prebuilt JavaScript programs in the form of behaviors . You attach behaviors to HTML tags on the page that define particular elements. A user triggers a behavior by doing something that the browser registers as an event, such as mousing over an image. Whenever the specified event happens to that element ”whether it is the entire Web page, a graphic, or a text link ”the associated action is performed. In Dreamweaver-speak, then, a behavior is the combination of an event and its subsequent action . Dreamweaver comes with several built-in actions to choose from, all of which have been tested to be as cross-browser and cross-platform compatible as possible. (Different browsers generate different events, and not all actions work in all browsers.) These include actions such as Call JavaScript, Control Shockwave or Flash, Drag Layer, Open Browser Window, Play Sound, and Show-Hide Layers. (See Table 10.A on this book's CD-ROM for a more thorough list.). In addition, you can build your own behaviors or download additional behaviors from the Internet. The Behaviors Panel Behaviors are added to elements/objects on the page (or to the page itself) through the Behaviors panel (see Figure 10.2), which you can open by selecting Window, Behaviors. This panel lets you associate new behaviors with existing tags, edit existing behaviors, and (for tags that have multiple behaviors) change the sequence in which the behaviors execute. Figure 10.2. In this figure, the Behaviors panel appears in the upper right of the workspace. The Add Action button is the "+" in the upper-left corner of the Behaviors panel. 
Attaching Behaviors You can attach behaviors to links, images, form elements, or any of several other HTML elements. You can also use the <body> tag in Code or Design view to attach them to the entire document. When behaviors or events are grayed out, they are unavailable. Because some events are relevant to only some page elements, not all behaviors and events are available all the time. The target browser selected determines which events are supported for a given element. For Example, Internet Explorer 4.0 has a greater selection of events for each element than Netscape Navigator 4.0 or any 3.0 browser. Generally, later browsers support all the events of earlier browsers. To attach a behavior, select Window, Behaviors to open the Behaviors panel. Select an object on the page. Click the Plus (+) button on the tab and choose an action from the Actions pop-up menu. A dialog box appears, specific to the selected action. This box includes fields, allowing you to customize the parameters of the action, and instructions. Make changes and click OK. The action now appears in the right column of the Behaviors panel. TIP To attach a behavior to the entire page, while in Code view, click the <body> tag in the tag selector located at the bottom left of the Document window.
The default event to trigger the action appears in the Events column on the left of the Behaviors panel. If this is not the trigger event you want ”and often it isn't ”select another event from the Events drop-down menu. Click in the Events column on the event to be changed, then click the down arrow that appears, and select the desired event from the drop-down menu. TIP You can set Dreamweaver MX 2004 to show only events that work in particular browsers by selecting the Show Events For option at the bottom of the Actions pop-up menu and selecting a browser and version.
| 