MS FrontPage —

Creating Behaviors

The toolbar's simple effects are cute, but not particularly impressive. What if you want to offer visitors some truly dynamic interactionslike menus that unfurl when a cursor passes over them or a button people can click to rewind a Flash movie? Back in the bad old days (before the 2003 release), FrontPage authors would have to write custom scripts to incorporate such complex effects. But with the addition of Behaviors, FrontPage has opened up the field to button-clicking greenhorns. Behaviors are advanced scripting options that FrontPage has gift-wrapped for you in dialog boxes and task pane controls.

The Behaviors task pane goes beyond the capabilities of the DHTML Effects toolbar, by letting you control specific variables. For instance, the Behaviors task pane features a swap image option, like the DHTML toolbar, but offers a far greater selection of trigger events to choose from. Behaviors also enable you to have an event on one element affect the display or action of another (great for your "the knee-bone is connected to the thigh-bone" type pages).

This section walks you through the basic steps of creating a behavior. Then you'll learn all about the actions you can create, the events you can base them on, and how to bring it all together to animate your pages.

Some browsers won't show FrontPage behaviors. Whether or not a viewer will see your handiwork depends not only on what browser she has, but what version. Because results vary, always test your FrontPage behaviors in multiple browsers. Fortunately, most behaviors work in recent versions of most browsers (after Internet Explorer 5 and Netscape 6).

Creating a Behavior

You create and manage behaviors within the Behaviors task pane. To open it, select View » Task Pane, and then select Behaviors from the task pane drop-down menu.

  1. Select the object on the page.

    You have to apply a behavior to a particular HTML tag. To select a tag, click an object on the page, or use the Quick Tag Selector toolbar (which you'll find just above the document windowif not, select View » Quick Tag Selector). The Quick Tag Selector helps you be precise and makes it easy to select elements like the <body> tag. FrontPage shows you what tag you've selected in the Behaviors task pane (see Figure 9-3). If you want an event on one element to influence another element, select the trigger element here. For example, if you want a cursor passing over a picture to reveal some nearby text, select the picture.

    Figure 9-3. When you pass your cursor over an event in the Events list, a drop-down arrow appears on the right. Click the arrow to access this menu and select other events.
    Whenever you want to see an event/action combo in the Behaviors task pane list, you first need to select the tag you want to set as its trigger. Once you select a tag, all behaviors connected with it appear in the list below. To see what tag is active, glance above the list, to the right of "Scripts on tag."

  2. Select an action.

    Within the Behaviors task pane, click Insert, and then choose the action you want. See "Creating Actions" on Creating Actions for details on all your choices here.

  3. Configure the action.

    Depending on what action you select, FrontPage needs different information. Each action has its own dialog box, where you set specifics. This tutorial includes details on how to configure each action (see "Creating Actions" on Creating Actions). Once you've entered all the details, click OK to set the action.

  4. Change the event.

    In the Behaviors task pane, the action you just created appears, with an event to the left of it. Depending on what choices you've made so far, FrontPage makes an educated guess in the event column and automatically sets it to something like the onclick event. If you want to change it, right-click the action and select Choose Event. Or, pass your cursor over the event field and then click the dropdown arrow that appears. At that point, you can make another selection from the event drop-down list (see Figure 9-3).

Events

The list of triggers in the event drop-down list are different depending upon what behavior you're implementing. Here's a rundown of the most basic events. Mouse and keyboard events:

  • onclick. A visitor clicks the element.

  • ondblclick. A visitor double-clicks the element.

  • onmousedown. A visitor clicks the element, but doesn't release the button.

  • onmouseup. A visitor clicks and releases the button while on the element.

    Use onclick instead of onmouseup. Both events create the same effect, but onclick works in more browsers.

  • onmouseover. A cursor passes over an element.

  • onmouseout. A cursor moves off the tag or element.

  • onkeydown. A visitor presses a key on the keyboard but doesn't release it. (You'll use keyboard events when you have visitors filling out forms, which you'll read about in Forms and Databases.)

  • onkeypress and onkeyup. A visitor presses and releases a key on the keyboard.

  • onabort. A page download stops prematurely.

  • onload. A page finishes loading. You'll use this most often for triggering actions after a page loads (just select the <body> tag and configure the behavior on it). But the onload event can also apply to images or video. For instance, if you select an image and then choose this event, whatever action you specify is linked to the completion of the image download.

  • onunload. A page is about to disappear because a viewer clicked a link to another page or entered another URL.

  • onresize. A viewer changes the size of the browser window.

  • onerror. An error occurs during a page or image load, or in the running of a script.

  • onscroll. A visitor moves the element's scroll bar. This could apply to a <body> tag or frame.

Form events (though you may not know much about forms yet, you can probably imagine that a visitor filling out a form is an action rife with potential events; you'll learn all about forms in Forms and Databases):

  • onchange. A visitor changes text in a form field.

  • onfocus. A visitor focuses on an element like a form text field by clicking or tabbing into it.

  • onblur. A visitor takes focus off of an element. For example, he clicks or tabs out of a text field.

  • onsubmit and onreset. A viewer clicks a form's Submit or Reset button. You can apply these two events only to a <form> tag (see Forms and Databases).

Most of the other events you'll find in this list have to do with live data connections. For instance, the on data available event occurs when a database has updated information to send to a Web page. For now, don't worry about these advanced functions. (In fact, you probably won't need them. Even if you'll be using FrontPage's data display features, the program handles this kind of programming for you.) Read on to learn about the real heart of behaviorsactions.

For a comprehensive list of events and more information on DHTML, crack open Dynamic HTML: The Definitive Reference by Danny Goodman.