Creating Actions

Behaviors can add a lot of valuable and impressive features to your Web site, and actions are the fuel behind this magic. As you'll see, actions can help you route viewers to the pages you want them to see and shoot visitors specific messages based on choices they've made. You can also check to see if they have the software they'll need for a plug-in (a special program, like a video player) you've included in your Web page, or wow them with magically appearing images and menu selections.

Again, when creating a behavior, you first select a tag on the page and then you pick the action. In the following pages, you'll learn what each action can do for you and how to configure it. After you set any one of these actions, it will appear in the Behaviors task pane, where you then set the event you want to trigger the action.

Actions to Control Navigation

You already know how to get visitors moving around your site using the trusty old hyperlink. As you'll see, a lot of actions in the Behaviors task pane let you take this kind of in-site navigation to a whole new level.

Creating a drop-down menu

Numerous hyperlinks on the same screen can create clutter and confusion. But sometimes you don't have a choicesay you've got 26 cousins, and you've got to include links to all of them on your Favorite Relatives page. Text for all these hyperlinks can take up a lot of screen real estate.

Why not consolidate? Instead of including a long list of hyperlinks on a page, you can create a drop-down list of links. This way the list, like the one shown in figure, displays only if a viewer clicks on it.

This drop-down list contains links to four other pages in this site: Tables, Chairs, Bookcases, and Cabinets. The list's drop-down arrow and the text above it help you guide your visitors' actions.

FrontPage calls this feature a jump menu and provides a dialog box to help you make one. To create a jump menu:

Create your drop-down list using the Jump Menu dialog box, which is also where you configure list items, and set their order and target window. To have the list display the first item again when a visitor returns to the page later on, turn on the "Select first item after URL change" checkbox.

---

Links in a jump menu don't behave like regular hyperlinks. They won't show up in Hyperlinks view and they won't update automatically if you move a file into a different folder. So, if you want your menu to work, don't move any files (including the page that contains the menu) after you create this feature.

---

Jump Menu Go

If a visitor selects an item in a jump menu, she's immediately taken to the destination page. But what if you want to give her more time to think about it? You can pause things by adding a Go button next to your drop-down list. This way, when your visitor makes a selection from the list, she first has to press Go to open the page. If a visitor is a keyboard-only type person (as many visually disabled people are), she'll need a Go button to make a selection from the list.

To add a Go button next to your jump menu, select Insert » Interactive Button (Creating Basic DHTML Efffects). Once you've got the button on your page, select it. Then, within the Behaviors task pane, select Insert » Jump Menu Go. A Jump Menu Go dialog box displays. Select the jump menu you want the button to affect from the drop-down menu and then click OK.

Now, the button will act as the hyperlink, connecting to whatever link a user chooses from the jump menu. But you've still got one more step: for the viewer to have a chance to click the Go button, you have to modify the jump menu itself to stop it from linking when a viewer clicks one of its choices. To do so, in the document window, select the jump menu. Its "onchange" behavior setting displays in the task pane. In the actions column, click on the jump menu to select it. Then, at the top of the task pane, click Delete.

Open Browser Window

Say you want a hyperlink's destination page to open in a new browser window, rather than replacing the current page. You already know how to do that after reading Understanding Hyperlinks Tutorial 3. But maybe you don't want your viewers to contend with the usual menu and toolbar clutter of a new browser window. And say you also want to specify how big the window will be. No problem. The Open Browser Window action gives you all the control you want by letting you create and launch windows like the one shown in figure.

This action usually opens off a link, but you can base it on another event, like a page load, if you want. After all, all those pop-up ads that clutter your screen as you surf the Web aren't choices you've actively made. That's right. Now you'll know how to pester beleaguered readers with pop-ups, too. For the sake of Webkind, please use your power for good only.

Here's one effect you can achieve with the Open Browser Window action. This is a plain browser window, stripped of all menus and toolbars. The window size corresponds exactly to the picture dimensions to create a tidy, controlled look.

---

Keep in mind that many people configure their systems to block pop-ups (those based on a pageload event) and some browsers, like Mozilla's Firefox, block them automatically.

---

After you've chosen your trigger element (a hyperlink or <body> tag), and selected Open Browser Window from the Behaviors task pane's Insert menu, the relevant dialog box opens. Then you can set the following options:

• Go to Url. Browse to the page that you want to open in your new browser window.

• Window Name. Text you enter here won't appear anywhere in your window, but may come in handy if you want another page to open in your new browser window. FrontPage uses this name to add a Target attribute to a link. So, you could have a second page open in this same window, replacing the initial page (as long as this window remains open). You can also use this field to target frames (see Frames Tutorial 6), by typing in the name of the frame. Because this text is a link target, you can't include any funny characters herejust letters and numbers.

• Window width, Window height. Type in exact pixel dimensions for your new window. FrontPage automatically sets these measurements to 200 pixels and won't let you enter a blank. Keep your sizes reasonable. A window that exceeds a visitor's monitor room will be impossible to read.

• Attributes. Decide which browser elements and menus you want to give viewers. If you turn on a checkbox, they'll have access to that browser feature. Don't know what all these attributes are? Take a look at Figure 9-7.

These are the basic browser window attributes that you can choose to display (or not) when you use the Open Browser Window action. One exception: you can't get rid of the title bar, which displays your page title. (Title is different from the HTML file name.

---

Taking away browser attributes isn't always cruel. Sometimes visitors lose track of what browser screens they have open. Say you've posted a special note or report that, for some reason, shouldn't appear on a regular pageone with links to the rest of your site. Taking away the navigation and menu bars is an easy way to communicate that a reader is at the end of the road. When he closes the new window, he's back where he belongs.

---

Go to URL (Redirect)

Imagine that your company has been bought out, and your old name has been scrapped. What about people still trying to go to your company's old Web site, www.DowJones36000.com? It's a simple matter of redirecting them to your company's new site.

Much like a hyperlink, the Go to URL behavior sends a browser to the URL you specify, but it provides more options. For instance, you can have the change happen when a viewer's cursor passes over something, or, more helpfully, when a page loads for the first time in a browser window. With DowJones36000.com, for example, you could create a barebones home page at this address and then redirect people to your new site (ShortSelling.com).

To set up a redirect, select the <body> tag of the initial page you expect people to arrive at, and within the Behaviors task pane, select Insert » Go to URL. Specify the destination URL and click OK. Then under Events, select onload from the drop-down menu.

---

The onload event is triggered only after the entire page loads. So, if your page has a lot of images or content, viewers may get a glimpse of it before the action takes them to the new URL. This can look sloppy and disconcert your visitors, who may worry that the browser's been hijacked. If you want a lightning-fast, imperceptible transition, then put very little on the dormant page. However, you should include some text and link to your new site, just to be thorough.

---

If setting the action on the onload event creates a switch that's too fast for you, or you want to be sure your visitors know your site has moved, you could base the Go to URL behavior on another event, like a click on a link or picture. You can also set your own schedule. See the box "Redirect on a Time Delay."

Redirect on a Time Delay

Imagine that you don't want to use a link or page load event to trigger your Web page redirect. Maybe you'd rather just set the redirect after a certain amount of time has elapsed.

While the Go to URL action uses JavaScript to hustle your visitors on to their next destination, there's an old fashioned HTML tag that you can add to the <head> section of your page that will redirect according to the number of seconds you specify.

<meta http-equiv="refresh"
content="10;URL=http://www.newcompanyname.
com">

The meta "refresh" tag can load a new page this way, or you can use it to refresh the same page. For example, many developers use this tag to update pages with links to live information, like stock quotes.

Always let your visitors know what's going on. For example, you may want to display a message that tells them something like "You will be redirected in 10 seconds" so they're not alarmed when their browser goes to a completely different page. Also include a hyperlink to your new site in case your visitor's browser doesn't support the meta "refresh" tag.

Check Browser

You've been hearing over and over about browser supportor lack thereoffor certain features. If you've already tested pages in a variety of browsers, you've probably seen how differently they can display the same page. Web designers sometimes get around this problem by creating more than one version of all or parts of their site. These alternate pages are identical but designed specifically for different browsers. In other words, one company may have two separate, but identical Web sites: one for Internet Explorer and one for Netscape. Designers then implement the Check Browser Behavior to direct a visitor to the appropriate site. (After which they go drink buckets of soothing herbal tea, in order to calm nerves jangled by the existence of so many different browsers.)

Did you ever wonder why some sites on the Web have a home page that contains only one link that says something like "Click to Enter"? A hyperlink like this can serve as the trigger event for the check browser action. Say you've loaded a page with the IE-only DHTML effects covered earlier in this tutorial. You can do other browser owners a favor and use such a trick to steer them to an alternate page.

---

While you might be tempted to have a page load event trigger this action, don't forget that the onload event starts only after the entire page has loaded. If you're trying to steer viewers away from the page in question, it'll be too late.

---

To implement this behavior, select the tag (usually a link) that will trigger your event. Then, within the Behaviors task pane, select Insert » Check Browser. Use the dialog box in figure to set your preferences.

Unfortunately, you can set only one browser apart from the pack here. Also, your choices are limited to those that Microsoft has providedyou can't add a browser here as you can when you're previewing pages.

In the "If current browser type is" drop-down menu, select a browser and version you'd like to set as the target. Then turn on the Go to URL checkbox beneath that field and browse to the correct page. To set another page for all other browser types, turn on the Go to URL checkbox on the bottom and, in the corresponding field, browse to the alternative page. Then click OK and set your event as you would for any behavior.

This dialog box lets you detect a viewer's browser and route her to a page made just for her. Choices are limited here, but you can separate out one major browser, at least. Use the version drop-down menu, on the upper-right corner, to steer older browsers away from pages that contain new technology.

Actions to Control Multimedia

If your site includes Flash or video files, you may want do to more than just throw them up on a page and hope your viewers can see them. FrontPage offers a few actions to help make sure your bells and whistles are actually jingling, blowing, and moving properly.

Check Plug-in

If you can't tell what browser a viewer might have, how would you know what other software he has loaded on his machine?

Just as you might want to create different pages to accommodate different Web browsers, you might also want to separate versions of pages for visitors who've got different kinds of plug-ins. (Plug-ins are miniature programs that play audio, video, and other specialized files directly within a browser's window.) For example, you might create two copies of the same page, one featuring a video in QuickTime, while the other shows it using RealPlayer. Use the Check Plug-in action to direct your viewers to the appropriate page.

This action works a lot like the Check Browser action. First, select a trigger tagfor instance, a link to a video. Then, in the Behaviors task pane, select Insert » Check Plug-in. As with Check Browser, you can only separate out one plug-in. Select it from the drop-down menu at the top of the dialog box and enter the corresponding URL. Then enter an alternative URL for all other programs and click OK.

Play an Audio File

Maybe you want an event to play a sound? You're in luck. The play sound action supports WAV, MIDI, Real Audio, AIFF, and AU sound files. Unfortunately, this behavior works only in Internet Explorer. Select the page element that'll trigger the sound and, within the Behaviors task pane, click Insert » Play Sound. Browse to select your sound file and set your event, as you would for any behavior.

---

You may want to add a sound that plays in the background while visitors have your page open in their browser. You don't need an action to do this. There's a setting in Page Properties that lets you have the sound loop continuously while the page is open. Think twice, however, before creating this racket. Your visitors may find such noise intrusive and annoying, since they have no control over it (other than hitting their computer's mute button or, worse, leaving your site).Also, depending on the size of the audio file, adding sound could really slow down your page, and it won't work in Netscape Navigator. But sound might be appropriate in certain situations. To add it, first select File » Properties. Locate the Background Sound setting on the bottom of the General tab. Click browse to find the audio file you want and use the Loop field to set the number of times you want it to play.

---

Control Properties in Flash

When you learned to insert Flash movies in Adding Pictures (Adding Videos and Flash Movies), you saw that FrontPage gives you basic control over Flash properties like height and width. The Control Properties in Flash action lets you control more obscure Flash properties. For instance, you could have the display window zoom in on the movie or pan across it.

To implement this action, select the trigger tag. This could be a button that says Rewind or Stop, depending upon what controls you want to give your viewers. Then within the Behaviors Task pane, select Insert » Control Properties in Flash, and then complete the dialog box:

• Movie. This drop-down list shows every Flash movie you've inserted on the page. Select the one you want to control.

• Method. This field features a list of all the properties you can adjust. Chances are you'll use one of the most common methods, which are:

  • Rewind. Movie goes back to the first frame.

  • Tplay. The movie plays.

  ---

  Any method that begins with T lets you target a nested clip within your Flash movie. (For instance, if your movie shows a moving car belching smoke, the car and smoke are probably separate clips. You could target only the car clip to stop, while the smoke would continue.) Just enter the target name in the field provided. If you want to play or stop the entire movie, don't enter anything in the target field.

  ---

• TStopPlay. The movie stops.

• LoadMovie. Have a movie replace the one that's already there or play another Flash movie on top of it. Just browse to select the additional SWF file and enter a layer number (Resizing and Positioning Layers)zero for replace, and one or greater to superimpose it over the original.

• Zoom. The display zooms in on the movie by the percent you specify.

• Pan. The display pans (moves across) an already zoomed-in movie. Specify the coordinates for the pan in pixels or percent.

To learn more about the selections above and the others in this dialog box, visit www.adobe.com and type "Flash methods" in the site's search box.

---

The Control Properties in Flash action works only in Internet Explorer 6.0. Some methods, like zoom, may work in earlier versions of IE, so you can give them a try, but your audience for this action is pretty much limited to those who've got Microsoft's latest browser.

---

Actions to Send Messages

You may find yourself occasionally wishing you had additional ways of reaching out, across the Web, and sending small notes to your site's visitors or quickly changing the information they're looking at. The following methods may be just what you're looking for.

Pop-up Message

If you need to alert your visitors to an important issue, use this action to make a pop-up message box appear in front of a viewer, based on a click or other trigger.

These pop-ups aren't pretty windows like the ones you can make with the Go to URL action. Instead, these look like regular Windows error message boxes that contain whatever text you specify. (Consider this your chance to write something slightly more friendly than the typical Microsoft missive.)

Select the element that'll act as a trigger, then within the Behaviors task pane, click Insert » Popup Message. Enter the message in the dialog box that appears and click OK. Then set the event.

Set Text of Frame

You can use this action to replace the content of a frame (pop back to Frames for a refresher on all things frame related). The term "set text" doesn't really convey the power of this action. The fact is you can include images, tables, or whatever you want. You're essentially replacing the HTML in the frame with new HTML. It's like loading a new page in the frame, but because the HTML is already part of the page, it's lightning fast.

To apply this action, you'll need to have a frameset in place. Select the trigger tag or object and then, within the Behaviors task pane, select Insert » Set Text » Set Text of Frame. Then complete the fields in the dialog box:

• Frame. This drop-down menu features all the frames available to you. Select the target frame.

• New HTML. Paste or type the HTML that you want to appear. If you're not comfortable working directly with code, just create your content on a blank page in the document window and copy the source code from Split view or Code view. Copy only content that's within the <body> tags. This action won't replace any code that you'd put in the head of page, like styles or behaviors, for instance.

• Preserve background color. If your frame features a background color that you want to keep when the new content displays, turn on this checkbox.

Set Text of Layer

The Set Text of Layer action works like the Set Text of Frame action, butas you might guessreplaces the content of a layer with whatever HTML you want.

To implement this action, first select a tag. Then, within the Behaviors task pane, select Insert » Set Text » Set Text of Layer. The Set Text of Layer dialog box appears:

• Layer. This drop-down list shows every layer on the page. Pick the one whose content you want to change.

• New HTML. Type in your message and format the text using HTML commands. Or paste in some source code from a page you create.

Set Text of Status Bar

Use this action to have a message appear in the status bar. Where's the status bar? It's the strip at the bottom of your browser. For instance, you can use this action to have a description or credit for an image appear when a visitor passes her cursor over it.

To create this action, first select the trigger tag (like <img> for an image). Then, within the Behaviors task pane, select Insert » Set Text » Set Text of Status Bar. In the dialog box that appears, type in the message and click OK.

Set Text of Text Field

You'll read all about forms when you get to Forms and Databases, but you've probably filled out hundreds of them yourself. You visit a page, fill in a few blanks, and then click Submit. Next thing you know, the fishing lures you ordered are en route to your cabin in the woodsall based on the information you entered in the form. When it comes time to create your own forms, you can use the Set Text of Text Field action to help visitors out by adding text to certain fields in response to viewer actions. For instance, say you ask a visitor "Do you have an alternate address?" and provide radio buttons for Yes and No. If a viewer clicks on the No radio button, you can trigger the Set Text of Text Field action to fill the alternate address field with a note that says "Please proceed to the next question."

To do so, first select the radio button that'll act as the trigger. Then, within the Behaviors task pane, select Insert » Set Text » Set Text of Text Field and fill out the dialog box that appears:

• Text Field. This drop-down list shows every text field on the page. Pick the one whose content you want to change.

• New Text. Type in the message that you want to appear. Click OK and set the event you want.

Image Actions

If you think graphics can spice up a Web page, just wait until you add a few actions to your pictures.

Swap Image

You've already read about a couple of ways to swap images. For example, FrontPage's interactive buttons automatically add image-swapping behavior to a page to generate a rollover effect. Then there's the DHTML Effects toolbar, which also provides a handy shortcut.

But neither of these methods quite measure up to the Swap Image action in the Behaviors task pane, which gives you loads more fine-tuning options. For example, say you have a page all about your trip to Alaska that opens with an impressive landscape photo you took. You can place a list of towns you visited down the left side of your page. When a viewer clicks on Skagway, a picture of that town replaces the landscape photo. Using the Swap Image behavior, you've made your own Alaska slideshow.

---

To achieve a similar effect, you could insert your pictures in layers (see Layers) and use the Change Property behavior to control layer visibility settings.

---

To create an image swap action follow these steps:

---

If you do set the event to be a click on a paragraph, be aware thatas with collapsible menusyour viewer may have trouble knowing that he needs to click in that spot, because his cursor won't change into a "click here" pointing hand like it does when he hovers over hyperlinks. For this reason, you may want to use the onmouseover event instead.

---

Preload Images

As anyone with a slower Internet connection knows, images can take a long time to download. The Preload Images action downloads image(s) onto a viewer's machine before they display on a page. Why would you want to do this? Say you've added a rollover button or other image swap to your page. When a viewer's cursor passes over it, the second image is supposed to replace the first. If your visitor had to wait for that second image to download, this effect would be ruined (it'd be kind of like a magician saying "ta-dah!" and then making her audience wait for the payoff spectacle). By the time the image appears, the cursor might be off on another part of the page, creating confusion. In fact, when you insert FrontPage's interactive buttons (Creating Basic DHTML Effects), the program automatically adds this action to ensure that the buttons work properly.

You want to attach this action to the body tag's onload event. Once you've selected the tag, open the Behaviors task pane and select Insert » Preload Images. Then complete the dialog box:

• Image Source File. Click Browse to locate the image and then click Add to insert it in the Preload Images list. Click Browse again to find another picture. You can add as many images as you want.

• Preload Images. Images you've added appear in this box. If you want to get rid of one, select it and click Remove.

When the list is complete, click OK, and then set the event to onload (if FrontPage hasn't already done so).

Advanced Action: Change Property

Now that you're familiar with all these different actions, you're ready for one that's slightly more intricate and bursting with possibilities.

The Change Property action lets you modify the appearance and/or placement of an object. This behavior changes font style, visibility, borders, or position. You can do something simple, like have a layer background change color on a cursor pass, or you can use this action to create complicated screen choreographya click on one button makes multiple pictures move around the screen.

The basic steps for changing properties of an element are the same as setting any other behavior, but you'll have to go through a bit more work when adjusting the settings in the dialog box. The following steps take you through the basic guidelines for completing the dialog box. To see this "action" in action, follow the tutorial at the end of this tutorial, which shows you how to use Change Property to animate a cascading menu system consisting of layers.

After you've selected the element that you want to trigger the Change Property action and accessed the Behavior pane's Insert » Change Property command, the dialog box in figure appears.

Now follow these steps:

Within the Behaviors task pane, the event is often automatically set to onclick. Click it and select another, if you wish.