ptg 15 15 What You’ll Do 349 Working with Behaviors Introduction Everybody loves the versatility that JavaScript can bring to a Web page, yet not that many people love programming in JavaScript, to make it happen. Dreamweaver makes your life easier by allowing you to insert Behaviors, most of which directly translate into JavaScript. Using behaviors, you can do things like insert pop-up windows, create disjointed rollovers, check to see if users have a certain plug-in or what browser they're running. The best thing about behaviors and commands is that they are extendable. Many third party companies and individ- uals write commands and behaviors for Dreamweaver. You can download these extensions from the Web, most often for free! A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specify- ing the event that triggers that action. Adobe Dreamweaver behaviors insert JavaScript code in documents to allow users to interact with a Web page, change the page, or to produce certain tasks. Behaviors are attached to a specific element on your page, whether it's a text link, an image, and even certain HTML specific tags. An action consists of pre-written JavaScript code that per- forms a specific task, such as opening a browser window, showing or hiding an AP element, playing a sound, or stop- ping a Flash movie. The actions provided with Dreamweaver are written by engineers to provide maximum cross-browser compatibility. In this chapter you'll learn how to apply behaviors to Web elements, how to edit and modify behaviors; even how to create and maintain a library of all your important behaviors. What You’ll Do Introduce Behaviors Apply Behaviors to Page Elements Apply Behaviors to Entire Page Edit Behaviors Work with Behaviors Add Behavior Effects Go to Another Web Page Open Another Browser Window Display Text Messages Preload and Swap Images Change Element Properties Drag an AP Element Show and Hide Elements Execute a JavaScript From the Library of Wow! eBook ptg 350 Chapter 15 Dreamweaver helps non-programmer types (you know who you are) use built-in JavaScript functions that are useful to any Web project. The code generated is well opti- mized so you do not have to worry about per- formance. A Dreamweaver behavior consists of two parts: An action that instructs the browser what to do, and an event that trig- gers the specific actions. Dreamweaver comes supplied with dozens of behavior actions, the most useful being: ◆ Check Plug-in. The Check Plug-in action sends visitors to different pages depending on whether they have the specified plug-in installed. ◆ Go To URL. The Go To URL action opens a new page in the current window or in the specified frame. ◆ Open Browser Window. The Open Browser Window action opens a URL in a new window. ◆ Popup Message. The Popup Message action displays a JavaScript alert with the message you specify. ◆ Preload Images. The Preload Images action loads images that do not appear on the page right away (i.e., rollover images) into the browser cache. ◆ Show Pop-Up Menu. The Show Pop- Up Menu behavior creates a pop-up menu within a page. ◆ Show/Hide Elements. The Show/Hide Elements action causes specified layers to be shown or hidden. ◆ Swap Image. The Swap Image action creates button rollovers and other image effects (including swapping more than one image at a time). ◆ Swap Image Restore. The Swap Image Restore action restores the last set of swapped images to their previous source files (automatically added whenever you attach the Swap Image action). ◆ Validate Form. The Validate Form action checks the contents of selected text fields to ensure that the user has entered the correct type of data. NOTE Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers. Behaviors are attached to a specific ele- ment on your page, whether it's a text link, an image, and even certain HTML specific tags. After you attach a behavior to a page element, whenever the event you've specified occurs for that element, the browser calls the action (the JavaScript code) that you've associated with that event. (The events that you can use to trigger a given action vary from browser to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the onMouseOver event, then whenever someone points to that link with the mouse pointer in the browser, your message pops up in a dialog box. A sin- gle event can trigger several different actions, and you can specify the order in which those actions occur. In order to make a behavior work, an action is linked to an event. Events are, effec- tively, messages generated by browsers indi- cating that a visitor to your page has done something. For example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the browser then checks to see whether there's some JavaScript code that the Introducing Behaviors From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 351 browser is to call when the event is gener- ated. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, where onLoad is an event associated with images and with the body section of the document. Notice the spe- cific way that JavaScript code is written. It's not only important to get the spelling of a code piece correct; in addition, case is impor- tant. For example onBlur is correct… onblur is not. The good news is that Dreamweaver inserts the correct code into the document through the use of the Behaviors panel. The possible Events associated with an Action are: ◆ onBlur. Activates when a blur event occurs. A field gains focus when the user clicks inside the text box, and the focus is lost (onblur) when the user clicks outside the box, anywhere on the page. ◆ onClick. Activates when the user clicks the left mouse button on the object. ◆ onDblClick. Activates when the user double-clicks the object. ◆ onError. Activates when an error occurs during object loading. ◆ onFocus. Activates when the object receives focus. A field gains focus when the user clicks inside the object. ◆ onKeyDown. Activates when the user presses a key. ◆ onKeyPress. Activates when the user presses an alphanumeric key. ◆ onKeyUp. Activates when the user releases an alphanumeric key. ◆ onLoad. Activates after the browser loads the object. ◆ onMouseDown. Activates when the user clicks the object with either the mouse or a form button. ◆ onMouseMove. Activates when the user moves the mouse over the object. ◆ onMouseOut. Activates when the user moves the mouse pointer outside the boundaries of the object. ◆ onMouseOver. Activates when the user moves the mouse pointer into the object. ◆ onMouseUp. Activates when the user releases a mouse button while the mouse is over the object. ◆ OnUnload. Activates immediately before the object is unloaded. The target browser you select determines which events are supported for a given ele- ment. The power of Behaviors lies in the fact that they use JavaScript code to create dynamic and interactive Web pages. Although JavaScript is not new to Web page design, it's quickly becoming more and more popular as the days roll by, and the World Wide Web Consortium ( www.w3c.org ) is working over- time to make all the code pieces work the same on all browsers. However, no matter how good the code is, there will always be times when the code warrior (you) decides that the code needs to be edited or com- pletely eliminated. Thankfully, with Dreamweaver, this is no problem whatsoever. From the Library of Wow! eBook ptg 352 Chapter 15 Dreamweaver allows you to attach behaviors to links, images, form ele- ments, or any of several other HTML elements. The Behaviors panel allows you to attach, modify, and manage behaviors embedded in a page. In the Behaviors panel, you can use options to show all events for a specific category, or only the ones currently attached to the page. The target browser you select determines which events are supported for a given element. Dreamweaver works well with current browsers. However older ones may be more limited. Internet Explorer 4.0, for example, has a much wider array of events for each element than Netscape Navigator 4.0 or any 3.0 browsers. If you need additional functionality, you can attach more than one event to a specific action; for example, when you user clicks on a specific image, the image changes, and a prerecorded sound plays. When you use multiple actions, they occur in the order in which they're listed in the Actions column of the Behaviors panel. Applying Behaviors to Page Elements Apply One or More Behaviors to a Page Element Open the Web page you want to apply a behavior to an element. Click the Window menu, and then click Behaviors to display the Behaviors panel. Select an element (image or link) on the page in Design view. Click the Add Behavior button (plus sign), and then select a behavior action from the Actions menu. NOTE Actions dimmed in the menu can't be chosen for that particular Web element. IMPORTANT The Deprecated submenu provides features for those who used them in Dream- weaver 8 or earlier. Dreamweaver CS3 or later provides new ways to perform the same tasks. Enter the parameters and options you want for the selected action; the parameters and options vary depending on the selected action. 5 4 3 2 1 1 2 4 6 5 3 From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 353 Click OK. The action is embedded into the HTML code and appears in the Behaviors panel. The default event is onClick. Click the default Event (onClick), and then click the Event list arrow to select the event you want to associate with this action (in this example, onMouseOver). If you want to apply more than one behavior, repeat steps 4-7. Click the File menu, point to Preview In Browser, and then select a browser to test your Web page. In your browser, perform the event to trigger the action. 10 9 8 7 6 9 7 See Also See “Checking for CSS Browser Compatibility” on page 234 for informa- tion on using browser compatibility. Did You Know? You can show events for a specific browser. Open the Behaviors panel, click the Add Behavior button, point to Show Events For, and then select the browser that you want to show events. You can show all events or only the ones currently attached to the page. Open the Behaviors panel, click the Show All Events button to show all available events, or click the Show Set Events button to show only the events currently attached behaviors. Testing Browser Compatibility Unlike CGI scripts, the client interprets Behavior JavaScript code. The good news is that there are currently many early browsers that sup- port JavaScript. Each browser supports different JavaScript features. Some bugs are platform-specific, while others are browser-specific. To en su re th at y our s ite will functi on c or rec tly, D rea mwe ave r gi ves you the ability to check the site, and list any problems that might occur with earlier browsers. The two most important ways are to check the code live in various browsers, or let Dreamweaver check the page for browser incompatibility issues. To check the code live, click the File menu, point to Preview In Browser, and then select a browser. Dreamweaver opens the active page in the selected browser, and you can check the page for errors live. To check browser compatibility, click the File menu, point to Check Page, and then select Browser Compatibility. Dreamweaver checks the current page, and gives you a list of any possible errors by browser type and version. For Your Information From the Library of Wow! eBook ptg 354 Chapter 15 In addition to attaching behaviors to links, images, form elements, or any of several other HTML elements, you can also attach behaviors to an entire document (using the <body> tag). The process to apply a behavior to an entire page is similar to the one you use to attach a behavior to an individual page element. The difference is what you select. For a page element, you select the element; for an entire page, you select the <body> tag, which applies the behavior to the document. For example, you can use the Check Plug-in behavior to check for the existence of media players, such as Adobe Flash, Apple QuickTime, and Microsoft Windows Media Player, and then redirect a visitor. Applying Behaviors to Entire Page Apply a Behavior to a Web Page Open the Web page you want to apply a behavior to an entire page. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the <body> tag in the tag selector at the bottom left of the Document window. Click the Add Behavior button (plus sign), and then select a behavior action from the Actions menu. Enter the parameters and options you want for the selected action; the parameters and options vary depending on the selected action. Click OK. 6 5 4 3 2 1 3 1 2 4 Did You Know? You can download and install third- party behaviors. If you don’t find the behavior functionality you need, you can download and install behaviors created by third-party developers. Open the Behaviors panel, click the Plus (+) button, and then click Get More Behaviors from the Actions menu. In your browser, search for the behavior you want on the Exchange site, and then download and install it according to the site instructions. From the Library of Wow! eBook ptg Chapter 15 Working with Behaviors 355 Apply the Check Plugin Behavior to a Web Page Open the Web page you want to apply a behavior to an entire page. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the <body> tag in the tag selector at the bottom left of the Document window. Click the Add Behavior button (plus sign), and then click Check Plugin. Select the following options from the Check Plugin dialog box. ◆ Select. Click the Select option, and then select a plugin from the menu (in this example, Flash). ◆ Enter. Click the Enter option, and then enter or browse for the name of the required plugin (use if your plugin is not displayed in the Select menu). ◆ If Found Go To URL. Enter or browse for the name of the URL to go to, if the required plugin is found on the visitor's computer. ◆ Otherwise Go To URL. Enter or browse for the name of the URL to go to, if the plugin is not found on the visitor's computer. ◆ Always Go To First URL If Detection Is Not Possible. Select if the visitor's computer does not allow for plugin checking, and the browser loads the first URL. Click OK. 6 5 4 3 2 1 3 2 4 1 6 5 From the Library of Wow! eBook . button (plus sign), and then select a behavior action from the Actions menu. Enter the parameters and options you want for the selected action; the parameters and options vary depending on. box, anywhere on the page. ◆ onClick. Activates when the user clicks the left mouse button on the object. ◆ onDblClick. Activates when the user double-clicks the object. ◆ onError. Activates. about per- formance. A Dreamweaver behavior consists of two parts: An action that instructs the browser what to do, and an event that trig- gers the specific actions. Dreamweaver comes supplied