Behaviors make it easy for Web designers to add interactive and dynamic features to a Web site. You can insert behaviors that range from performing a simple task such as calling a client-side script, to complex tasks such as configuring a DHTML menu for your Web site.
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.
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 events available in the Behaviors task pane are documented on Microsoft’s MSDN Web site. To access the documentation, browse to http://msdn2.microsoft.com/en-us/library/ms533051.aspx.
The number and type of events available depend on the element you select before inserting a behavior. When you insert a behavior, Expression Web 2 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” before inserting your behavior. Your behavior will then be applied to those words. Without using this method, the behavior will affect the entire paragraph.
→ | For more information on the Quick Tag Selector, see Chapter 13, “Using the Quick Tag Tools,” p. 223. |
After a behavior has been applied to an element, there is no visual indicator that it has been applied. Because of this, it is quite easy to inadvertently apply a behavior to an HTML element only to find that another behavior has been applied to that element’s parent. In these cases, the parent’s behavior will take precedence.
Behaviors are implemented in Expression Web 2 using a combination of a JScript source file and an HTML file. If you have the coding knowledge necessary, you can edit these files to enhance a behavior to suit your specific needs. These files are located by default in the C:Program FilesMicrosoft ExpressionWeb 2Templates1033Behaviors12ACTIONS
folder.
Expression Web 2’s behaviors offer a way to add interactivity and dynamic elements to your Web pages without having to know programming. Behaviors should work in all common browsers without problems because Microsoft uses standard DHTML and scripting techniques to ensure maximum compatibility.
Keep in mind that there is no way for Microsoft to test compatibility for every possible configuration, so make sure you test your pages before publishing your Web site.
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 2 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:
Select the image.
If the Behaviors task pane is not visible, select Task Panes, Behaviors.
Click the Insert button and select Call Script.
Type showInfo();
in the Call Script dialog, as shown in Figure 23.2.
Click OK.
→ | For more information on creating and using scripts in your pages, see Chapter 24, “Client-side Scripting,” p. 417. |
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.
→ | For more information on using styles, see Chapter 18, “Managing CSS Styles,” p. 315. |
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:
Insert a table 400 pixels wide that contains three columns and three rows.
→ | For more information on inserting and configuring tables, see Chapter 9, “Using Tables and Layout Tables,” p. 145. |
Add some graphics of your choice to each corner cell in the table. Feel free to use clip art if you have no graphics handy.
Resize the center cell so it is 150 pixels wide and 200 pixels high. (See Figure 23.4 for an example of what the table should look like at this point.)
Insert a layer. Position and size it so it fits within the center cell. Name the layer layer1
.
→ | For more information on using layers, see Chapter 25, “Using Layers,” p. 437. |
Insert three more layers and position them directly on top of layer1
. The easiest way to accomplish this is to copy layer1
and then paste the other layers. Name the other layers layer2
, layer3
, and layer4
, respectively.
Select layer1
from the Layers task pane and enter some text of your choice.
Change the visibility of layer1
to hidden by clicking the eye icon so the eye is closed.
Select layer2
and enter some text of your choice.
Change the visibility of layer2
to hidden.
Repeat steps 8 and 9 for the other two layers. (See Figure 23.5 for the completed Layers task pane.)
Select the upper-left image. From the Behaviors task pane, select Insert, Change Property.
In the Change Property dialog, click the Select Element radio button.
Choose div
from the Element Type drop-down, and then choose layer1
from the Element ID drop-down.
Click the Visibility button and click the Visible radio button. Click OK.
Check the Restore on Mouseout Event check box.
Click OK.
In the Behaviors task pane, change the onclick
event to onmouseover
.
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.
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 check box in step 17 of the previous section [“The Change Property
Behavior”], Expression Web 2 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 2 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.
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.
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.
Many Web developers fail to realize that the onload
event for a Web page fires after the page has completely loaded and not before the page loads. This is necessary so that any script that runs in the onload
event will have access to all page elements.
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 be either 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.
→ | For more information on using audio and video, see Chapter 14, “Using Graphics and Multimedia,” p. 237. |
The Go To URL
behavior (shown in Figure 23.10) simply redirects users to a specified URL when the event you choose occurs.
The Jump Menu
behavior allows you to easily add a drop-down box to a Web page. When an item is selected in the drop-down, 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 2 will insert a drop-down list for the jump menu at the insertion point’s location.
Click the Add button. Enter the text that you want to appear in the drop-down 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 drop-down 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 drop-down, as shown in Figure 23.12.
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 drop-down 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.
You can control the following attributes for the new window:
Window name—. A unique name for the new browser window so you can refer to it with other behaviors or your own scripts.
Window width—. The width of the new window in pixels.
Window height—. The height of the new window in pixels.
Navigation toolbar—. The toolbar that contains the Forward button, Back button, Home button, and so on.
Location toolbar—. The toolbar that contains the address bar.
Status bar—. The bar at the bottom of the new window.
Menu bar—. The menu bar at the top of the new window.
Scrollbars as needed—. Turns on scrollbars if the content of the new window is larger than the window itself.
Resize handles—. Allows for resizing of the new window by dragging the edges.
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 2 will add the Change Property Restore
behavior.
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.
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.
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.
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
.
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.
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 before clicking OK, as seen in Figure 23.18. Otherwise, the background color will revert to the default for the browser you are using.
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 2, see Chapter 25, “Using Layers,” p. 437. |
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.
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.
The Set Text of Text Field
behavior (shown in Figure 23.21) sets the text that appears in a text box 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.
To insert the Set Text of Text Field
behavior, open a page that contains a text box 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.
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 2 uses the Swap Image
behavior to implement the interactivity of the button.
→ | For more information on Interactive Buttons, see Chapter 22, “Using Interactive Buttons,” p. 383. |
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 2 is forced to resize an image, you are going to get less than optimal results.
The Swap Images dialog also provides a check box 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.
As new browser versions are released, you may find that a particular behavior doesn’t work in an updated browser. However, that doesn’t have to keep you from using a cool behavior that you want to use on your Web site. Using the Check Browser
behavior, you can ensure that only people who are using a compatible browser get to your page.
The recommended method for using the Check Browser
behavior is to add it to the <body>
tag and fire it with the onload
event. By specifying a different page to be displayed for specific browsers, you can be sure that the people viewing your Web page are properly equipped to view it with all its features intact.
The onload
event of the <body>
tag fires after a page has completed loading. If you use the Check Browser
behavior on a page to redirect according to the browser being used, by the time the behavior is invoked, the page will have already been loaded and is already visible. Your Web site visitor will see the first page load briefly and will then be redirected to the correct page per the settings configured in the Check Browser
behavior. The result is an unprofessional look, but it can be easily avoided.
There are two methods to avoid this problem. The first method is to use a blank page and configure the Check Browser
behavior on it. The second method is to edit the code added by the Check Browser
behavior. Either of these methods will prevent users from ever seeing a page that does not display properly in their browsers.
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.
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 2 inserts into your page when you use the Check Browser
behavior.
When you insert the Check Browser
component, Expression Web 2 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+', /*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+', /*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+', /*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.
One word of warning: If you use the preceding method and edit the code that Expression Web 2 inserts, the Check Browser
behavior will no longer be visible in the Behaviors task pane and you will not be able to remove the behavior using the Behaviors task pane. To remove the behavior, you will have to remove the code in Code View.