Microsoft KB Archive Search

Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

  1. Home
  2. How to create hover effects for form buttons using DHTML and CSS in FrontPage

How to create hover effects for form buttons using DHTML and CSS in FrontPage

View products that this article applies to.

Summary

FrontPage 2000 and FrontPage 2002 contain a rich set of Cascading Style Sheet (CSS) and Dynamic HTML (DHTML) authoring capabilities that allow you to create a variety of hover effects. This article describes you can create hover button effects for regular form field buttons by using the CSS features and DHTML formatting.

↑ Back to the top

More information

To create hover button effects for Form Field buttons, follow these steps:
  1. Create a new, blank page.
  2. On the Insert menu, point to Form, and click Form.
  3. To apply default "Submit" button colors, follow these steps:

    1. Right-click the Submit button, and click Form Field Properties.
    2. Click Style.
    3. Click Format, and then Border.
    4. Click the Shading tab.
    5. Click to select a color in the Foreground color and Background color lists.
    6. Click OK three times to return to the document.
  4. To insert DHTML hover colors, follow these steps:

    1. Click the Submit button.
    2. On the Format menu, click Dynamic HTML Effects.
    3. In the On list, click to select Mouse Over.
    4. In the Apply list, click to select Formatting.
    5. Click to select Choose Border in the list to the right of the Apply list.
    6. Click the Shading tab.
    7. Click to select a color in the Foreground color and Background color lists.
    8. Click OK, and close the DHTML Effects toolbar.
  5. To move the hover colors to the Submit button, follow these steps:

    1. Switch to HTML view.
    2. In HTML view, move the following code from the <p> tag to the to your <input> tag: 
         dynamicanimation="fpAnimformatRolloverFP1"
   fprolloverstyle="background-color: #000000; color: #FFFFFF"
   onmouseover="rollIn(this)"
   onmouseout="rollOut(this)"
   language="Javascript1.2"
      Note: The values for "background-color" and "color" may be different from those shown in the previous code.
  6. If you want, repeat the last few steps for the Reset button.
  7. When you have completed the previous steps, your HTML code may look similar to the following HTML code example: 
       <input type="submit" value="Submit"
      style="background-color: #008000; color: #000000"
      dynamicanimation="fpAnimformatRolloverFP1"
      fprolloverstyle="background-color: #000080; color: #FFFFFF"
      onmouseover="rollIn(this)"
      onmouseout="rollOut(this)"
      language="Javascript1.2">

   <input type="reset" value="Reset"
      style="background-color: #800000; color: #FFFFFF"
      dynamicanimation="fpAnimformatRolloverFP1"
      fprolloverstyle="background-color: #000080; color: #FFFFFF"
      onmouseover="rollIn(this)"
      onmouseout="rollOut(this)"
      language="Javascript1.2">
  8. Save this page to your Desktop as "HoverTest.htm" and minimize FrontPage.
  9. You will notice that FrontPage saved the following two files to your Desktop:

    • HoverTest.htm.
    • Animate.js.
    The first file is the page you created in the previous steps, the second file is a collection of DHTML functions that the page will use.
  10. Open "HoverTest.htm" in Internet Explorer 4.0 or later. Notice that as you move your mouse over each button, you should see the color change

↑ Back to the top

Keywords: KB222949, kbhowto, , kbforms, kbscript, kbprogramming, kbbutton

↑ Back to the top

Article Info
Article ID : 222949
Revision : 4
Created on : 1/24/2007
Published on : 1/24/2007
Exists online : False
Views : 300