Create a hover button

Janet Benincosa, Harrison County Technology Integration Specialist

Return to Technology Integration Site

 

  1. In Page view, in the Normal pane, position the insertion point where you want to create a hover button.
  2. On the Insert menu, click Web Component.
  3. In the left pane, click Dynamic Effects.
  4. In the right pane, double-click Hover Button.
  5. In the Button text box, type the text label for the hover button.

If you want to use a custom picture that already contains a text label, clear the default value.

  1. In the Link to box, type the URL of the page or file you want to display when the hover button is clicked. Or, click Browse to locate the page or file.

To preview the hover button as it will appear when a site visitor browses to the page on the World Wide Web, click the Preview button, or click Preview in Browser on the File menu.

 

To Set properties for a hover button

  1. In Page view, right-click the hover button you want to modify, and then click Hover Button Properties on the shortcut menu.
  2. Choose the properties you want.

Set the text label   Type the label you want to use in the Button text box. If you type a long label, adjust the Width of the hover button.

Set the default hyperlink   In the Link to box, type the URL to the page or file you want to display when a site visitor clicks the hover button. Or, click Browse to locate the page or file.

Set the color of the button when it is initially displayed on the page   Select the color you want to use.

Set the background color of the button   Select a background color for the hover button. You can't choose to make the background color transparent; however, you can use the same background color for both the button and the page.

Set the hover effect   Select the visual effect that will be displayed when a site visitor points to the button.

Set the color of the hover effect   Select the color for the hover effect.

Set the size of the hover button   Modify the settings in the Width and Height boxes, in pixels.

Add a graphic to a hover button

You can use a picture as the background of a hover button, as the hover effect, or both.

Use a picture as the background of a hover button

In Page view, do the following:

  1. In the Normal pane, right-click the hover button, and then click Hover Button Properties on the shortcut menu.
  2. Click Custom.
  3. In the Button box, type the URL of the picture you want to use as the background for the hover button. Or, click Browse to locate the picture.
  4. Click OK. 
  5. In the Width and Height boxes, type the width and height of the picture in pixels, and then click OK. The size of the hover button must match the size of the picture.

Use a picture as the hover effect of a hover button

In Page view, do the following:

  1. In the Normal pane, right-click the hover button, and then click Hover Button Properties on the shortcut menu.
  2. Click Custom.
  3. In the On hover box, type the URL of the picture you want to use for the hover effect on the hover button. Or, click Browse to locate the picture.
  4. Click OK.
  5. In the Width and Height boxes, type the width and height of the picture in pixels, and then click OK. The size of the hover button must match the size of the picture you use for the hover effect. To preview the hover button as it will appear when a site visitor browses to the page on the World Wide Web, click the Preview button, or click Preview in Browser on the File menu.