Creating Actions

When you look at a group of complicated menus and dialog boxes, like the Behaviors task pane, you might have a hard time connecting the hodgepodge of choices to real world problems and solutions.

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.

9.4.1. 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.

9.4.1.1 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 9-4, displays only if a viewer clicks on it.

Figure 9-4. 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:

Insert a Jump Menu.

Place your cursor at the spot on the page where you want the menu, and within the Behaviors task pane, select Insert Jump Menu. A Jump Menu dialog box, like the one in Figure 9-5, appears.
Add Choices to your menu list.

Click Add to open the Add Choice dialog box. Within the Choice field, enter the text that you want to display as an item in the list. In the Value field, browse to or type the URL for the link and click OK. Repeat for every entry you want to include in your menu.
Set target properties for your list items.

Within the Jump Menu dialog box, you can set the link's targetspecify whether or not a browser should open the link in the same window, open a new one, or display the page in a frame (see Tutorial 6 for more about frames). Select the destination page and make your choice within the "Open URLs in" drop-down menu.
Set list order.

Select an item and click Move Up or Move Down to rejigger the order of your list items.
Save the list.

Click OK, and your list appears on your Web page.

Figure 9-5. 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.

Note: 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.

9.4.1.2 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 (Section 9.2.2). 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.

9.4.1.3 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 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 9-6.

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.

Figure 9-6. 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.

Note: 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 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.

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. See Section 10.4.3.2 for more on the difference.)

Tip: 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.

9.4.1.4 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.

Note: 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."

BEHIND THE SCENES
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.

9.4.1.5 Check Browser

Throughout this book, 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.

Tip: 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 9-8 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.

Figure 9-8. 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.

9.4.2. 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.

9.4.2.1 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 (Section 9.4.1.5), 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.

9.4.2.2 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.

Tip: 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.

9.4.2.3 Control Properties in Flash

When you learned to insert Flash movies in Tutorial 4 (Section 4.4.2), 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.
Tip: 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 (Section 8.3.2)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.macromedia.com and type "Flash methods" in the site's search box.

Note: 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.

9.4.3. 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.

9.4.3.1 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 (see Figure 9-6). 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.

9.4.3.2 Set Text of Frame

You can use this action to replace the content of a frame (pop back to Tutorial 6 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.

9.4.3.3 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.

9.4.3.4 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 (see Figure 9-7). 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.

9.4.3.5 Set Text of Text Field

You'll read all about forms when you get to Tutorial 15, 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.

9.4.4. Image Actions

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

9.4.4.1 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.

Tip: To achieve a similar effect, you could insert your pictures in layers (see Tutorial 8) and use the Change Property behavior to control layer visibility settings (see "Advanced Action: Change Property" on Section 9.4.5).

To create an image swap action follow these steps:

Select a trigger tag.

This could be a <p> paragraph tag thatto follow the example abovecontains a word like Skagway. Or (depending on the effect you're after) it could be the image you want to swap out, a different image, or any tag.
Set the action.

In the Behaviors task pane, select Insert Swap Image, and then fill out the dialog box:
- Image Name. The top portion of the dialog box lists all the images on the page. Click to select the original image that you want to swap out.
- Swap Image URL. Browse to the image that you want to swap in to replace the original.
- Preload Images. FrontPage turns on this checkbox automatically and you should leave it on. See the description of the "Preload Images" action, next, to understand why.
- Restore on mouseout event. If your trigger event will be a mouseover, you can turn on this checkbox to have the original image return once a cursor passes off the trigger element.
Set the event.

In the Behaviors task pane, select the event that'll trigger the image swap.

Note: 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 (see Figure 2-12, back on Section 2.5.2.1). For this reason, you may want to use the onmouseover event instead.

9.4.4.2 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 (Section 9.2.2), 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).

9.4.5. 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 9-9 appears.

Now follow these steps:

Select the element you wish to modify.

If you want to modify the item you selected on the page, leave this radio button set at Current Element. If you want an event on the item you selected to modify another object on the page, click Select Element. Next, identify the element. Click the Element Type drop-down menu and select the HTML tag for the element (img for an image, div for a layer, td for a table cell, and so on). Finally, from the Element ID list, select the element itself.

Figure 9-9. The Change Property dialog box lets you specify how an action will modify a page element. Here, it has been set to make a layer visible.

Set properties for the modified element.

How will the element change following the trigger event? Specify modifications now by clicking one of the following options:
- Font lets you change the typeface, color, and appearance of text elements.
- Position lets you set alignment or absolute positioning. You could have an element move to the right side of the page, for exampleor click absolute positioning and set the exact coordinates to get a picture or layer to move to a specific spot.
- Borders lets you add or remove a border and set shading options, including background color and picture.
- Visibility lets you hide or reveal an element.
You can add multiple properties for an element. For example, you might want to have a picture move and gain a border at the same time.

Note: You can't edit more than one element at a time.

Specify mouse out behavior, if applicable.

The dialog box includes a checkbox ("Restore on mouseout event") in the lower-left corner that can save you the trouble of setting an additional event.

For example, if the pass of a cursor over a picture will reveal a layer, but you want the layer to appear only while the cursor sits over the picture, turn on the "Restore on mouseout event" checkbox. This means that a browser will restore the element to its original property setting when a cursor passes off it.

FREQUENTLY ASKED QUESTION
ID Your Elements

I can't find the element I want to modify in the Element ID list. Where did it go?

The Change Property dialog box displays all the elements it can see. In order to be seen by the dialog box, an element needs to have an identity attribute within its HTML tag. An identity attribute is a unique name for the element. The problem is, while FrontPage often assigns IDs automatically, just as often, it doesn't.

If an element is lacking an ID attribute, or if you don't know what its ID is, you can find it or add it yourself. Unfortunately, FrontPage supplies no helpful dialog box for this job. You must add an ID by editing the HTML code directly.

But you don't have to slog through all the code on your page. Instead, just use the Quick Tag Editor. To get to it, use the Quick Tag Selector, which is located directly above the document window. If it's not visible, select View . Quick Tag Selector.

If you select the element in the document window, the element's tag (img for an image, div for a layer, and so on) should display in the Quick Tag Selector toolbar. Click the tag's drop-down menu and select Edit Tag. The Quick Tag Editor, like the two illustrated here, appears.

Figure 9-10.

Find the ID information for the tag. As illustrated, ID information will be something like:

If there's no ID attribute, you can type it in. Click to place your cursor between any attributes, or at the end of the tag. Follow the format above, using any text you want between the quotation marks (as long as no other page element has that same ID). To save the ID, click the checkmark on the right side of the Quick Tag Editor. The ID now appears in the Change Property dialog box's ID drop-down menu.

Note: The "Restore on mouseout event" checkbox actually creates a Change Property Restore behavior, which you'll see appear in the task pane. In fact, you can choose Change Property Restore from the action menu, but it does the exact same thing as the "Restore on mouseout" checkbox.If you want an event other than mouseout to restore an element to its original state, don't turn on the checkbox; use the menu selection instead. To do so, wait until after you've set the initial Change Property action, then select the trigger tag again. In the Behaviors task pane, select Insert

Change Property Restore and then click OK. Once the Change Property Restore behavior appears in the task pane, you can change its event.

Save the change property setting.

Click OK to close the dialog box.
Set your trigger event as you would for any other behavior.

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

POWER USERS' CLINIC
Call for Scriptwriters

So far, you've read about a lot of tricks FrontPage creates for you by inserting scripts based on your settings in the Behaviors task pane. But what if you've got some JavaScript of your own you'd like to run? No problem. In Code view, insert the script into the <head> section of your page. Choose your trigger tag, and in the Behaviors task pane, click Insert Call Script. Then type the name of your script (like myscript() or greateffect() or whatever you name it) and click OK. Then set the event. Note that JavaScript is case sensitive. Get the name right, or a browser won't be able to find your script.

If it's just a single line of JavaScript that you want to call, type it directly in the box. For instance, you could create a "Print this Page" button on your page, and have it trigger a Call Script action that lets a viewer print your page with a click. Type window.print() in the Call Script action dialog box, click OK, and then set the onclick event.

[Previous] [Content Page] [Next]