Behaviors are inserted from the Behaviors task pane shown in Figure 23.1. The Behaviors task pane is the perfect place for behaviors because it allows you to work with them without the interface getting in the way. That’s very important because behaviors cannot be inserted and forgotten. After you insert a behavior, there’s plenty of tweaking you can do, and not having to dismiss a dialog between each change makes working with behaviors more efficient.

Figure 23.1. The Behaviors task pane makes it convenient to insert and work with behaviors.

To access the Behaviors task pane, select Task Panes, Behaviors. Click the Insert button and you’ll see a collection of 16 behaviors you can insert into your page. Whether a specific behavior is available for insertion depends on what is selected when you click the Insert button.

In some situations, it might be necessary to insert more than one behavior for a single element. For example, when you are implementing rollover buttons, you need a Swap Image behavior and a Swap Image Restore behavior for the image. Behaviors are processed from top to bottom. When you insert more than one behavior on a single HTML element, depending on the type of behavior, you can change the order of precedence using the up and down arrow buttons in the Behaviors task pane. Select a behavior and click the up arrow to move the behavior up in the list and the down arrow to move it down in the list.

Behaviors are implemented using events and actions. An event is a message that is intercepted by the Web browser when a certain action takes place. For example, when you click a hyperlink, an onclick event is sent to the browser. An action is what the browser does in response to the event. Behaviors allow you to add interactive scripts to your pages to take advantage of events.

The number and type of events available to you depend on the element you select before inserting a behavior. When you insert a behavior, Expression Web adds attributes to the closest HTML element to the left of the insertion point. (The Tag label in the Behaviors task pane indicates the element to which the behavior will be applied.)

Behaviors are easily applied to hyperlinks, images, and other page elements because these elements are already associated with an HTML tag to which the behavior can be applied. However, when you want to define a behavior for one or more words within a paragraph, it becomes a bit more complicated. If you simply select the words and apply a behavior, you will find that the behavior is applied to the entire paragraph and not just the selected words.

To apply a behavior to one or more words within a paragraph, you can enclose those elements within a span tag. The easiest way to do this is to select the word or words you want to use, switch to Split View, and enclose those words in a span tag, including a unique ID. For example, to use the words “click here” in a paragraph as the link for a behavior, change the code from this

<p>For more information, click here.</p>

to this

<p>For more information, <span id="mylink">click here</span>.</p>

Switch back to Design View. You can now click the span Quick Tag Selector to select the words “click here” prior to inserting your behavior. Your behavior will then be applied to those words. Without using this method, the behavior will affect the entire paragraph.

The Call Script behavior runs a line of script when the event you specify is raised. You will likely want to write some script first and then call it using this behavior, but you don’t have to take that approach. If you have only one line of script to run, you can enter that line in the Call Script dialog and Expression Web will run it when the designated event occurs.

Suppose you’ve written a script called showInfo that you want to run when an image is clicked on your page. To do this with the Call Script behavior, perform these steps:

The Change Property behavior (shown in Figure 23.3) allows you to change any property on any HTML element on your page. (A property is a style applied to a particular page element.) The Change Property dialog allows you to configure some default properties such as font styles, borders, visibility, and so on, but you can also change other properties that aren’t listed by clicking the Add button in the Change Property dialog.

Figure 23.3. The Change Property behavior is useful for adding interactivity to your Web page.

Using the Change Property behavior, it is extremely easy to add professional-quality interactivity to your Web site with minimal effort. For example, suppose you have a series of graphics in a page, and each graphic links to a page of your site. When a user of your site hovers the mouse over each graphic, you want a text description of the link to appear on the page, and when the mouse leaves the graphic, you want the text description to disappear. The Change Property behavior allows you to easily implement this functionality without writing a single line of code.

To create an example of interactivity using the Change Property behavior, perform these steps:

Complete Steps 11–17 for the other images and add a Change Property behavior for layer2, layer3, and layer4, just as we did for layer1. Save the page and preview it in your browser. You have just created a professional-quality effect with just a few clicks of the mouse. Figure 23.6 shows the completed Change Property dialog box for one of the layers.

Figure 23.6. The completed Change Property dialog box shows the property change for layer1.

The Change Property Restore behavior is meant to be used in combination with the Change Property behavior. It restores the most recent properties changed by the Change Property behavior to their previous values. (When you selected the Restore on Mouseout Event checkbox in Step 17 of the previous section (“The Change Property Behavior”), Expression Web automatically inserted a Change Property Restore behavior to restore the property.)

No dialog exists for this behavior. As seen in Figure 23.7, when you insert the Change Property Restore behavior, Expression Web tells you what it will do and then adds it to the Behaviors task pane. You can easily determine which properties are being restored by double-clicking the Change Property behavior listed directly under the newly inserted Change Property Restore behavior.

Figure 23.7. The Change Property Restore behavior requires no user input.

The Check Browser behavior (shown in Figure 23.8) allows you to easily redirect your site visitors based on their browser and which version of that browser they are using. The Check Browser behavior can check for versions of Internet Explorer, Netscape Navigator, Opera, AOL, WebTV, AOL TV, and HotJava.

Figure 23.8. The Check Browser behavior allows you to detect a user’s browser and version and redirect the user appropriately.

The Check Browser behavior can be added to a page itself, but it’s better to attach it to a particular page element. If you attach it to a page, it is invoked from the onload event of the page, and by the time that event fires, the page will have already been rendered.

Unless you are detecting browsers on your site’s entry page, it is best to attach the Check Browser behavior to the onclick event of a hyperlink that loads a new page. You can then load a particular page depending on the browser your visitor is using, and the wrong page will never be rendered.

If you are detecting browsers on your site’s entry page, create an empty page and attach a Check Browser behavior to the onload event for the page. By doing that, you can ensure you will not load any elements that will cause errors or malformed rendering in a particular browser (see the “Lagniappe” section of this chapter for more details).

A plug-in can either be an ActiveX control running in Internet Explorer or a plug-in running in Netscape or another browser. Using the Check Plug-in behavior (shown in Figure 23.9), you can redirect a user based on whether he or she has one of the more common plug-ins. The Check Plug-in behavior is designed to check for the existence of Adobe Flash, Apple QuickTime, RealNetworks RealPlayer, Adobe Shockwave, and Microsoft Windows Media Player.

Figure 23.9. The Check Plug-in behavior makes redirecting users based on browser plug-ins quick and easy.

The Go To URL behavior (shown in Figure 23.10) simply redirects users to a specified URL when the event you choose occurs.

Figure 23.10. The Go To URL behavior does just what its name implies.

The Jump Menu behavior allows you to easily add a dropdown box to a Web page. When an item is selected in the dropdown, the user’s browser will go to the URL specified for that item.

To create a jump menu, select Insert, Jump Menu from the Behaviors task pane to activate the Jump Menu dialog (shown in Figure 23.11). There is no need to select anything first. Expression Web will insert a dropdown list for the jump menu at the insertion point’s location.

Figure 23.11. Items are added to a jump menu by specifying the text to appear and the URL to which the item should link.

Click the Add button. Enter the text that you want to appear in the dropdown list in the Choice field and the URL you want that item to link to in the Value field. Click OK to add the item to the jump menu.

After you have added one or more items to your jump menu (more than one item is recommended), you can configure that item to open in either the default target for the page or in a new window.

By checking the Select First Item After URL Change box, you can force the jump menu to return to the first item in the list when clicking the Back button in your browser after jumping to a URL.

The Jump Menu Go behavior is designed to be used with the Jump Menu behavior. When you don’t want your Jump Menu behavior to jump as soon as a new item is selected in the dropdown list, you can use the Jump Menu Go behavior as a trigger for the menu.

To use the Jump Menu Go behavior, insert a Jump Menu behavior and then insert or select an element (such as an image that says “Go!”) to use for your trigger. Select Insert, Jump Menu Go from the Behaviors task pane and select the jump menu from the dropdown, as shown in Figure 23.12.

Figure 23.12. Using the Jump Menu Go behavior allows you to create a trigger for your jump menu.

After you’ve done that, you must stop the jump menu from jumping as soon as you select an item. The Jump Menu event defaults to onchange, but if you leave the event set to onchange, you won’t have the opportunity to use the Jump Menu Go component because the menu will jump as soon as you select an item. To change the jump menu so it doesn’t jump when you select a different item, select the jump menu’s dropdown list, and then select the Jump Menu behavior in the Behaviors task pane. Click the Delete button in the task pane to delete the onchange event from the task pane. (Don’t press the Delete key on your keyboard.) This will remove the entire entry for the jump menu, but don’t worry. After doing this, your Jump Menu Go behavior will be the trigger for the jump menu.

The Open Browser Window behavior (shown in Figure 23.13) allows you to configure a hyperlink to open in a new browser window.

Figure 23.13. Easily create popup windows with specific configurations using the Open Browser Window behavior.

You can control the following attributes for the new window:

When adding the Open Browser Window behavior to text, it’s most useful to use the Change Property and Change Property Restore behaviors to change the pointer to a hand when users hover over your link.

To implement this, add your Open Browser Window behavior first. Then add a Change Property behavior and add your own property by clicking the Add button. Use style.cursor for the Property Name and hand for the Property Value. Make sure you also check the Restore on Mouseout Event box so that Expression Web will add the Change Property Restore behavior.

Note

If you are having trouble with the browser window appearing behind the main window, see “Open Browser Window Pops Up Behind Existing Window” in the “Troubleshooting” section of this chapter.

The Play Sound behavior (shown in Figure 23.14) allows you to play a sound when the selected event is triggered. The Play Sound behavior supports wav files, midi files, RealAudio files, AIFF sound files, and AU sound files.

Figure 23.14. The Play Sound behavior allows you to play a sound when a particular event is triggered.

The Popup Message behavior (shown in Figure 23.15) provides a dialog in which you can enter a message that should be displayed in an alert dialog in the browser. When the selected event is triggered, the text you enter will appear in an alert dialog with an OK button.

Figure 23.15. The Popup Message behavior makes creating JavaScript popup messages simple.

The Preload Images behavior (shown in Figure 23.16) allows you to preload images when a page initially loads. The most common use of preloading images is when swapping images on mouse rollover buttons. In these situations, you want the image that displays when the user points to the button to load as soon as the page loads even though it is not initially visible. If you don’t preload such images, the user will experience a delay while the image loads the first time he or she points to the button.

Figure 23.16. The Preload Images behavior makes preloading images a snap.

To preload one or more images, insert the Preload Images behavior, click the Browse button, browse to your image, and then click OK. After you have selected your image, click the Add button to add it to the Preloaded Images list. You can add as many images as you’d like to the list.

The Set Text behavior consists of four separate behaviors: Set Text of Frame, Set Text of Layer, Set Text of Status Bar, and Set Text of Text Field.

Set Text of Frame

The Set Text of Frame behavior sets the HTML of the frame you specify when the selected event is triggered. Suppose, for example, you have a frames page that consists of miscellaneous content on the left, main content on the right, and a small navigation frame on top of the main content frame. Using the Set Text of Frame behavior, you can easily implement a bread crumb effect in the navigation frame, as shown in Figure 23.17.

Figure 23.17. A bread crumb effect is simple to implement with the Set Text of Frame behavior.

To insert the Set Text of Frame behavior, open a page containing a frame and select the HTML element containing the event with which you want to trigger the behavior. Select Insert, Set Text, Set Text of Frame from the Behaviors task pane. Select the frame into which you would like to enter HTML, enter the HTML code that you would like to appear in the frame, and click OK.

If you set the background color for the frame page or inline frame and would like it to be preserved, make sure you check the Preserve background color box prior to clicking OK, as seen in Figure 23.18. Otherwise, the background color will revert to the default for the browser you are using.

Figure 23.18. The Set Text of Frame behavior allows you to maintain the current background color after setting a frame’s HTML.

Set Text of Layer

The Set Text of Layer behavior allows you to specify the HTML to be rendered in the specified layer when the selected event is triggered. The bread crumb effect shown previously in Figure 23.17 can be implemented using the Set Text of Layer behavior by using a layer to hold your bread crumb navigation information instead of a frame.

→	For more information on using layers in Expression Web, see “Using Layers,” p. 439 (Chapter 25).

To insert a Set Text of Layer behavior (shown in Figure 23.19), open a page containing a layer and select the HTML element containing the event with which you want to trigger the behavior. Select Insert, Set Text, Set Text of Layer, enter the HTML you would like to have rendered in the layer, and click OK.

Figure 23.19. The Set Text of Layer behavior allows you to easily set the HTML to be used to render the content of a layer.

Set Text of Status Bar

The Set Text of Status Bar behavior allows you to easily change the text that appears in the status bar at the bottom of the browser window. This can be useful to display messages of interest to visitors of your site. For example, you can use this behavior to display a descriptive message when a user hovers over hyperlinks on your Web page.

To insert the Set Text of Status Bar behavior, select the HTML containing the event with which you want to trigger the behavior and then select Insert, Set Text, Set Text of Status Bar. Enter the message you would like displayed in the status bar and then click OK, as shown in Figure 23.20.

Figure 23.20. The Set Text of Status Bar behavior makes it very simple to change the text displayed in the status bar—just enter your text and click OK.

Set Text of Text Field

The Set Text of Text Field behavior (shown in Figure 23.21) sets the text that appears in a textbox or text area field. This behavior can be used when you need to set the value for a form field based on a particular event.

Figure 23.21. The Set Text of Text Field behavior sets the text of textboxes and text areas.

To insert the Set Text of Text Field behavior, open a page that contains a textbox or text area field and select Insert, Set Text, Set Text of Text Field. Enter the text you would like to appear in the text field and click OK.

→	For more information about textboxes and text areas, see “Using Form Controls,” p. 195 (Chapter 11).

The Swap Image behavior allows you to swap one image for another when a specified event occurs. The most common use of this behavior is to create rollover buttons. In fact, when you insert an Interactive Button, Expression Web uses the Swap Image behavior to implement the interactivity of the button.

To use the Swap Image behavior, open a page containing one or more images, select the image you would like to swap, and select Insert, Swap Image from the Behaviors task pane. The Swap Images dialog (shown in Figure 23.22) contains a list of all images in the document. The image you selected is highlighted, but you can configure a swap image for as many images as you’d like before clicking OK. Just keep in mind that you are configuring one event, so if you configure a swap image for img1, img2, and img3 and attach it to the onmouseover event for img1, all three images will swap when you roll over img1.

It is best to use two images of the same size for your rollovers. The Swap Image behavior will use the image dimensions of the original image for the swap image. If the proportions are different or if Expression Web is forced to resize an image, you are going to get less than optimal results.

Figure 23.22. The Swap Image behavior makes rollover button creation simple.

The Swap Images dialog also provides a checkbox labeled Preload Images. Checking this box will automatically insert a Preload Images behavior to preload all the swap images you configured. Restore on Mouseout Event automatically inserts a Swap Image Restore behavior, which we will talk about next.

The Swap Image Restore behavior works much like the Change Property Restore behavior. It restores the images that were swapped in the entry immediately below it in the Behaviors task pane. It is used only after applying the Swap Image behavior.

This behavior is automatically inserted if the Restore on Mouseout Event box is checked when configuring a swap image in the Swap Images dialog.

I configured a Popup Message and an Open Browser Window behavior. When I browse to my page, I can see both, but the new browser window opens behind the main browser window. How can I fix that?

Change the order of your behaviors by clicking the arrow buttons in the Behaviors task pane. An Open Browser Window behavior should always appear at the bottom of the list because it’s the last thing you want to do on a page. If you perform some other action on the page after the Open Browser Window behavior has created a new window, the main window will resume focus and the new browser window will be moved behind it.

The first method of preventing the wrong page from being displayed to your Web site visitors is to add the Check Browser behavior to a blank page. Using this method, the page that loads initially contains no content and is only used to redirect users to the correct page based on the browsers they are using.

Using this method, you will need to create three pages: one blank page containing the Check Browser behavior, one page for users who have a browser that supports the behavior you are using, and one page for users who are using all other browsers. When you insert the Check Browser behavior, you will need to configure a separate page for your targeted browser and another URL for all other browsers, as seen in Figure 23.23.

Figure 23.23. The Check Browser behavior configured with one page for browsers that support your behavior and another page for all others.

The second method of preventing an unprofessional appearance when using the Check Browser behavior involves editing the code inserted by the behavior. Even though this method requires you to edit the code used by the behavior, it involves less work than the blank page method, and it produces better results. To use this method, you first need to analyze the code Expression Web inserts into your page when you use the Check Browser behavior.

When you insert the Check Browser component, Expression Web inserts a JavaScript function called FP_checkBrowser that determines which browser is being used to view the page. It also inserts a call to the FP_checkBrowser function in the onload event of the <body> tag. The call to the FP_checkBrowser function is the code that needs to be moved.

When you insert the Check Browser behavior, the <body> tag is rewritten to include the following function call:

<body onload="FP_checkBrowser('Microsoft Internet Explorer', '4+',
[ic:ccc]/*href*/'', /*href*/'static.htm')">

As mentioned earlier, because the call to the FP_checkBrowser function is in the onload event of the <body> tag, the page will be displayed momentarily before being redirected. To correct that problem, you will need to move the function call so it appears immediately after the function itself.

The following code is inserted at the beginning of the page when the Check Browser behavior is being used:

 //Check version
 loc=ver.search('\+'),v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v)
 vm=true;}else if(maj==v)vm=true;loc=ver.search("any");if(loc>=0)vm=true;
 if(vm&&tm){ if(url1!='')location=url1;}else if(url2!='')location=url2;
}
// —>
</script>
</head>

<body onload="FP_checkBrowser('Microsoft Internet Explorer', '4+',
[ic:ccc]/*href*/'', /*href*/'static.htm')">

To alter the code so users are redirected immediately, before the page loads, remove the function call from the onload event of the <body> tag and move it to the end of the <script> section of the page, as shown in the following code:

 //Check version
 loc=ver.search('\+'),v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v)
 vm=true;}else if(maj==v)vm=true;loc=ver.search("any");if(loc>=0)vm=true;
 if(vm&&tm){ if(url1!='')location=url1;}else if(url2!='')location=url2;
}
FP_checkBrowser('Microsoft Internet Explorer', '4+',
[ic:ccc]/*href*/'', /*href*/'static.htm')"
// —>
</script>
</head>

<body>

Notice that the call to FP_checkBrowser script has been moved from the <body> tag to the end of the <script> block. Because client-side script outside a function runs when it is encountered, this change will cause the FP_checkBrowser function to be called before the page loads. The result will be an instantaneous redirect instead of a redirect after the page loads completely.