Skiing in Stowe

Downhill

Snow Report

Cross Country

Resorts

Class Info 

Animate a page element

You can apply Dynamic HTML (DHTML) animation effects to just about anything on a page — text, paragraphs, pictures, buttons, marquees, and so on — and tie the effect to a trigger event, such as clicking a mouse, pointing a mouse, loading a page, and so on. You can create an animation that makes text fly in from the right when the page is loaded, as in the following example:

DHTML animation makes this text fly in from the right when the page is loaded.

1. Select the page element you want to animate, and then click Dynamic HTML Effects on the Format menu.

   The DHTML Effects toolbar is displayed.

2. In the On box, click the down arrow, and then select the event that will trigger the animation:
   • To start the animation when a site visitor points to the page element and clicks the left mouse button once, select Click.
   • To start the animation when a site visitor points to the page element and double-clicks the left mouse button, select Double click.
   • To start the animation when a site visitor points to and rests on the page element, select Mouse over.
   • To start the animation when the page is loaded in a site visitor's browser, select Page load.

   Note   The events listed in the On box depend on the type of page element you selected.

3. In the Apply box, click the down arrow, and then select the type of animation effect you want to occur:
   • To apply an animation that moves a page element, click Fly out, Fly in, Drop in by word, Elastic, or one of the other movement animations.
   • To apply an animation that changes the appearance of the page element, such as changing a font color or applying a border effect, click Formatting.
   • If you selected a picture, to apply an animation that swaps the picture with another one, click Swap picture.

   Note    The effects listed in the Apply box depend on the type of page element you selected, and on the type of event you selected in step 2.

4. In the Choose Settings box, click the down arrow, and then choose the settings for the effect:
   • If you applied Fly out animation in step 3, select the direction or type of movement, such as to left or to top-right by word.
   • If you applied Formatting animation in step 3, select Choose font to change the font style, size, color, effects, or character spacing, or select Choose border to change the border or shading.
   • If you selected a picture and a Swap picture effect in step 3, click Choose picture and then select the picture to swap on the event you selected in step 2.

   Note    The settings listed in the Choose Settings box depend on the type of page element you selected and the type of effect you selected in the Apply box.

Tips

• The best way to determine the type of animation you want is to experiment by applying different events and effects and then previewing the page in a browser. To preview the page, click the Preview tab, or click Preview in Browser on the File menu.

• To remove the effect, click Remove Effect on the DHTML Effects toolbar. You can also remove animation in Page view by selecting the page element and pressing CTRL+SPACEBAR.
• You can copy animation from one page element to another by using Format Painter . Select the element whose animation you want to copy, click Format Painter , and then click the page element to which you want to apply the animation.
• You can apply multiple effects to most page elements. For example, you can animate text to fly in from the right when the page is loaded, and then add a border around the text that is displayed when a site visitor clicks it.