What You’ll Do
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 individuals 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 specifying 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 performs a specific task, such as opening a browser window, showing or hiding an AP element, playing a sound, or stopping 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.
DW 10.2
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 optimized so you do not have to worry about performance. A Dreamweaver behavior consists of two parts: An action that instructs the browser what to do, and an event that triggers the specific actions.
Dreamweaver comes supplied with dozens of behavior actions, the most useful being:
• Check Browser. The Check Browser action sends visitors to different pages depending on their specific browser.
• 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.
• Play Sound. The Play Sound action plays a sound (requires the visitor to have the ability to play sounds).
• 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.
Behaviors are attached to a specific element 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 single 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, effectively, messages generated by browsers indicating 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 browser is to call when the event is generated. 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 specific way that JavaScript code is written. It’s not only important to get the spelling of a code piece correct; in addition, case is important. 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 element. 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.
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 overtime 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 completely eliminated. Thankfully, with Dreamweaver, this is no problem whatsoever.
DW 10.2
Dreamweaver allows you to attach behaviors to links, images, form elements, 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.
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.
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.
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.
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.
See Also
See “Checking for CSS Browser Compatibility” on page 234 for information on using browser compatibility.
DW 10.2
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.
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.
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.
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 popup 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 popup 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.
After you create a behavior, you can quickly and easily change the parameters for the action or the event that triggers the action. When you complete your changes to a behavior, all occurrences of the behavior on the page are updated. If other pages use the same behavior, you need to update the behavior on each page.
Open the Web page with the behavior you want to change.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select an element on the Web page that contains an attached behavior, or if the behavior is attached to the document, click the <body> tag in the tag selector at the bottom left of the Document window.
The behaviors attached to the element appear in the Behaviors panel.
Select the specific event for the action that you want to edit.
Click the Behaviors Options button, and then click Edit Behavior.
Timesaver
Double-click the event to open the dialog box; you can also select it, and then press Enter (Win) or Return (Mac).
In a behaviors dialog box, make the changes you want; the dialog box options differ depending on the behavior.
Click OK.
Open the Web page with the behavior you want to change.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select an element on the Web page that contains an attached behavior, or if the behavior is attached to the document, click the <body> tag in the tag selector at the bottom left of the Document window.
The behaviors attached to the element appear in the Behaviors panel.
Click the specific event that you want to edit.
Click the Event list arrow, and then select the event you want to trigger the action from the available options.
Behaviors you have attached to a selected page element appear in the Behaviors panel in the behaviors list by event in alphabetical order. If you have multiple actions for a specific event, the behaviors are executed by the browser in the order in which they appear in the behavior list. You can use the Behaviors panel to change the order. If you no longer need a behavior, you can remove it from the list.
Open the Web page with the behavior you want to change.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select an element on the page that contains multiple behaviors.
The behaviors attached to the element appear in the Behaviors panel.
Select the behavior action you want to change.
Click the Up or Down buttons to move the action to a different stacking order.
Open the Web page with the behavior you want to remove.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select an element on the Web page that contains an attached behavior, or if the behavior is attached to the document, click the <body> tag in the tag selector at the bottom left of the Document window.
The behaviors attached to the element appear in the Behaviors panel.
Select the behavior action you want to delete.
Click the Remove Event button (minus sign).
The behavior is removed from the document.
Dreamweaver Effects give you one more way to create dynamic Web pages. For example, you can use Behavior Effects to make a Web element shrink to half size, or to slowly fade away, there’s even an event that lets you make objects shake. While these options are fun to use, remember that Web design is not about what you can do to a site to make it dynamic. You have to ask yourself this question: Are the special effects that I’m using helping me to keep my visitor’s attention, and are they in line with the message that I’m trying to send? If the answer to those questions is “yes,” then by all means, use effects; however, if the answer is “no,” then stay away from using the effects.
Open the Web page you want to apply a behavior effect to an element.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select an element on the page to which you want to attach an effect.
Click the Add Behavior button (plus sign), point to Effects, and then select an effect from the following options:
• Appear/Fade. Use this effect when you want the element to slowly appear or fade from the Web page.
• Blind. Use this effect when you want the element to slowly rise or lower on the page (like opening or closing a blind).
• Grow/Shrink. Use this effect when you want the element to increase or decrease in size.
• Highlight. Use this effect when you want the element (typically text) to change color.
• Shake. Use this effect when you want the element to shake side to side.
• Slide. Use this effect when you want the element to slide. Works by selecting the container tag of the content tag that you want to slide.
• Squish. Use this effect when you want the element to slowly reduce in size until gone (the anchor point for the squish effect is the upper-left corner of the Web object).
Specify the options you want in the dialog box for the specific effect; the options vary depending on the effect.
Important
Not all the behavior effects work for all the elements in Dreamweaver; an error message may appear.
Click OK to attach the effect to the Page, Document, or Tag.
The Go To URL behavior gives you the ability to link an element on a Web page to a URL address. For example, you can create a Web page, and then use the Go To URL behavior to direct visitors to other sites and pages, or you can create a set of interactive buttons for use on a standard HTML driven Web site. Whichever option you choose, the ability to direct a visitor to other Web sites is essential to creating Internet-oriented documents.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add the Go To URL behavior.
Click the Add Behavior button (plus sign), and then click Go To URL.
A dialog box appears, allowing you to set the details of the action.
Type the URL or click Browse, select the URL from the Select File dialog box, and then click OK.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Open Browser behavior allows you to set a hyperlink to open in a new browser window. When you use the Open Browser behavior, you need to specify the URL you want to open in the new browser window and any window attributes, such as width, height, navigation and location toolbar, status bar, menu bar, scrollbar as needed and resize handles. If you want to use this behavior with text, you can also use the Change Property and Change Property Restore behaviors to change the pointer to a hand when visitors hover over your text link.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add the Open Browser Window behavior; typically link text or graphic.
Click the Add Behavior button (plus sign), and then click Open Browser Window.
A dialog box appears, allowing you to set the details of the action.
Type the URL or click Browse, select the URL from the Select File dialog box, and then click OK.
Enter a window size (width and height in pixels).
Select the check boxes with the window attributes you want to use.
Enter a window name. The window name is used in the behavior script, so it cannot have any spaces or special characters.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
Dreamweaver provides several behaviors to display user text messages, including Popup Message and Set Text. The Set Text behavior consists of four individual behaviors: Set Text of Container, Set Text of Frame, Set Text of Status Bar, and Set Text of Text Field. These behaviors allow you to display text in an alert dialog box, a container, specific frame, text field, or the Status bar.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add the Popup Message behavior.
Click the Add Behavior button (plus sign), and then click Popup Message.
A dialog box appears, allowing you to set the details of the action.
Type the message you want.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add a behavior.
Click the Add Behavior button (plus sign), point to Set Text, and then click Set Text Of Status Bar.
A dialog box appears, allowing you to set the details of the action.
Type the message you want.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Preload Images behavior allows you to preload images when a Web page initially loads. This is useful when you want to swap images on mouse rollover buttons. The Preload Images behavior loads the rollover image when the page initially loads, so visitors will not experience a delay while the image loads the first time a visitor points to the button. The Swap Images behavior allows you to swap one image for another when an event occurs. The most common use of this behavior is to create rollover buttons. Along with the Swap Image behavior, you can also use the Swap Image Restore behavior, which restores the images that were swapped by the Swap Image behavior.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element or <body> tag in the tag selector for the entire page you want to add the Preload Images behavior.
Click the Add Behavior button (plus sign), and then click Preload Images.
A dialog box appears, allowing you to set the details of the action.
Click Browse, locate and select the image you want to preload, and then click OK.
Click the Add Items button (plus sign).
To add more images, repeat steps 5 and 6.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the image you want to swap.
Click the Add Behavior button (plus sign), and then click Swap Image.
The selected image appears highlighted in the Swap Image dialog box.
Click Browse, locate and select the image you want to swap it with, and then click OK.
To insert a Preload Images behavior, select the Preload Images check box.
To insert a Swap Image Restore behavior, select the Restore Images onMouseOut check box.
To remove a swap, select an image in the list, and then delete the file and path in the Set Source To box.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Change Property behavior allows you to change properties, such as font styles, borders or visibility, for an element on a Web page. The Change Property behavior is useful for adding interactivity to a Web page. For example, you can have the Change Property behavior display a text description or link address when a user points to a picture on a page. Along with the Change Property behavior, you can also use the Change Property Restore behavior, which restores the most recent property changes made by the Change Property behavior. When you use the Change Property Restore behavior, Dreamweaver displays a message dialog box acknowledging the use of the behavior. You can double-click the behavior to display a list of properties being restored.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add the Change Property behavior (in this example, select the cell phone image).
Click the Add Behavior button (plus sign), and then click Change Property.
A dialog box appears, allowing you to set the details of the action.
Click the Type Of Element popup, and then select the type you want to change (in this example, select DIV).
Click the Element ID popup, and then select an ID (in this example, select div “apTextSign”).
The AP element to the right of the cell phone image contains text, which you’ll change the font size to a larger size.
Click the Select option and select the property you want to change (in this example, select fontSize), or click the Enter option and enter the property you want to change.
Enter the new value you want (in this example, enter 24).
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Drag AP Element behavior allows you let visitors on a Web page to drag an AP (Absolute Positioned) element. This behavior is useful for creating interactive training, games, and interface controls, such as a slider. The behavior allows you to specify how you want the AP element to move. You can constrain the movement in a specific direction, to a specific location or target, or to snap to another element. In order to use the Drag AP Element behavior, you need to call the behavior before the visitor can drag the element. To achieve this, you need to attach the Drag AP Element behavior to the body object with the onLoad event.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Create the AP Element you want to add the Drag AP Element behavior.
Click <body> in the tag selector in the Document window.
Click the Add Behavior button (plus sign), and then click Drag AP Element.
A dialog box appears displaying the Basic tab.
Click the Movement popup, and then click Constrained or Unconstrained.
If you selected the Constrained option, enter values for Up, Down, Left, and Right (in pixels).
The values are relative to the starting position of the AP element. To constrain movement, use the following methods:
• Rectangle. Enter positive values in all four boxes.
• Vertical. Enter positive values for Up and Down and 0 for Left and Right.
• Horizontal. Enter positive values for Left and Right and 0 for Up and Down.
Enter values for the Drop Target in the Up, Down, Left, and Right boxes (in pixels), or click Get Current Position to automatically insert the current position of the AP element.
The drop target is the spot where you want the visitor to drag the AP element. Values are relative to the top left corner of the browser window.
Enter a Snap If Within value (in pixels) to specify how close the visitor needs to be to the drop target before the AP element snaps to the target.
To define the drag handle, track movement, and trigger an action, click the Advanced tab.
• Drag Handle. Click the popup, and then select Entire Element or Area Within Element. For an area, enter values for the area you want within the element.
• While Dragging. Select the Bring Element To Front, then check box, select a position, and then enter the script code or function you want executed during the drag.
• When Dropped. Enter the script code or function you want executed when dropped, and then select the Only If Snapped check box to execute the code only if snapped.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Set Nav Bar Image behavior allows you to change an image into a navigation bar image or modify an existing navigation bar. You can change images depending on the current state of the navigation bar (either Up image, Over image, or Down image), or change the URL or select a window when a visitor clicks a navigation bar button. By default, clicking a navigation bar image causes all other images to display the Up state. You can specify advanced settings to change the default Up state to something else.
Open the Web page with the navigation bar you want to change.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select the image in the navigation bar you want to change.
Click the Add Behavior button (plus sign), and then click Set Nav Bar Image.
A dialog box appears displaying the Basic tab.
Change the options you want for the navigation bar image.
Click OK.
See Also
See “Inserting a Navigation Bar” on page 174 for information on inserting a navigation bar and setting specific options in the Set Nav Bar Image dialog box.
Open the Web page with the navigation bar you want to change.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select the image in the navigation bar you want to set.
In the Behaviors panel, double-click the Set Nav Bar Image action related with the event you want to change.
A dialog box appears displaying the Basic tab.
Click the Advanced tab.
Click the When Element Is Displaying popup, and then select one of the following options:
• Over Image or Over While Down Image. Select to change the display of another image when the pointer is over the selected image.
• Down Image. Select to change the display of another image after a visitor clicks the image.
Select another image on the page.
Enter the path and file name of the image or click Browse to select the image file.
If you selected Over Image or Over While Down Image, enter the path and file name of the image or click Browse to select the image file.
Click OK.
The Show-Hide Elements behavior allows you to show, hide, or restore the visibility of elements on a page. This behavior is useful for displaying information or providing interaction when a visitor points to an element. For example, when a visitor points to a picture or a text box, you can display information about the item to provide added value and some interactivity. When the visitor moves the pointer away, you can restore the element back to its original state.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add a behavior.
Click the Add Behavior button (plus sign), and then click Show-Hide Elements.
A dialog box appears, allowing you to set the details of the action.
Click the element you want to show, hide, or restore.
Click Show, Hide, or Default, which restores the default visibility of the element.
Repeat steps 5 and 6 for each element you want.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.
The Call JavaScript behavior runs a line of script when an event occurs. The behavior only runs one line of script, which means you can execute a single line of code or a procedure that calls a section of code. To use the Call JavaScript behavior, you need JavaScript experience and coding knowledge, which is outside the scope of this book.
Open the Web page you want to apply a behavior.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Click the element you want to add a behavior.
Click the Add Behavior button (plus sign), and then click Call JavaScript.
A dialog box appears, allowing you to set the details of the action.
Type the line of script you want to run.
Click OK.
To change the trigger, click the event, click the Event list arrow, and then select the event you want.