Hover Buttons

Hover Buttons are a feature of FrontPage 98 that allows you to create buttons that change form or colour when the mouse pointer is moved over them. As such, they are great for producing a navigation bar for your site, like the example below:

Although powered by small Java Applets, FrontPage contains a Hover Button window to allow easy access to the range of functions supported by the Hover Button Applet. The four Hover Buttons above were added using the FrontPage Editor command Insert|Active Elements|Hover Button. The Hover Button window that allows you to customise the buttons is fairly complex, but the screenshot below shows the options that have been used for these particular Hover Buttons.

Hover Button main window

The first field contains the Button text. Hover Buttons work best if the text is short, say one or two words. Note that there is a Font button if you want to change the font, although you are limited to one of four fonts: Arial, Courier, Sans Serif or Times Roman. The maximum font size is 40 points, but it is better to use a smaller font size. Don't forget that it is also possible to change the Width and Height of Hover Buttons by using the fields in the main Hover Button window.

The second field enables you to set the URL that the hover button will link to.

Finally, you are able to specify both a Button color as well as an Effect color. The Button color drop-down lists contain a selection of the most common colors, although for both you may specify a custom color. The important thing is to ensure that the colors look good together - it is most common to use a dark color for the button color, and a lighter version for the effect color.

In the example buttons above, the Glow effect was used, which lights the Maroon buttons up with a red color when the mouse is moved over them. The images below show all of the other effects that can be applied using the Effect drop-down list in the Hover Button window:

Color fill:
Color Fill Hover Button effect

Color average:
Color average Hover Button Effect

Glow Hover Button Effect

Reverse glow:
Reverse glow Hover Button Effect

Light glow:
Light glow Hover Button Effect

Bevel out:
Bevelled out Hover Button Effect

Bevel in:
Bevelled in Hover Button Effect

Customized buttons

Although the default effects and buttons can look very effective on a web page, there may be times when you would like to use your own images. To do this, use your favorite graphics program, to make two identically sized images. In this example I have used the Image Composer Button Wizard to make a yellow Special Offers button. I then used the Dye Effect to make a cyan colored button. Finally, both images were exported as GIFs using the File|Save for the Web menu command.

Back in FrontPage 98, insert a Hover Button as described previously. In the Hover Button window, leave the Button text field blank, and don't alter the Button color, Effect and Effect color drop-down lists. Don't forget to add a URL in the Link to field! Next, click on the Custom button at the bottom of the Hover Button window. When the Custom window appears, type the filename of the custom image into the Button and On hover fields at the bottom of this window. Back in the main part of the Hover Button window, ensure that the Width and Height fields are set to match the dimensions of your custom images. The completed example of a custom button is shown below:

Adding sound effects to Hover Buttons

If you move your mouse pointer over the Special Offers Hover Button shown above, you will hear a sound sample being played. The ability to attach sound samples to Hover Buttons is a hidden secret of FrontPage 98!

Hover Buttons cannot play the popular .wav sound file format common to PCs, so if your sample is in this format you will need to follow the procedure described below. This procedure resamples the sound file to ensure it is compatible with the Hover Button, then saves it in the correct type of .au file format.

To test the sound effect, load the page into the web browser (the Preview pane in FrontPage will not work). If you use Netscape 4, it is possible to use the Netscape menu command Communicator|Java Console to spy on Java Applets. This is very useful for working out why the Hover Button sound sample isn't working (in the example window below, the sound sample has been sampled at to high a frequency for the applet.

Netscape Communicator Java Console

Uploading the Hover Button Applet

Because Java Applets are separate files to the actual web page, you have to ensure that they are uploaded to the web server along with the web page and all the associated images.

If your pages are stored on a server supporting the FrontPage server extensions, then the required Applet will be uploaded automatically, and will reside in the _fpclass folder. If your web pages are stored on a server that does not support the FrontPage server extensions, then make sure you transfer the _fpclass folder along with your other files. If you can't see this folder in your FrontPage web, then use the FrontPage Explorer menu command Tools|Web Settings. In the FrontPage Web Settings window, click on the Advanced click-tab and ensure that the Show documents in hidden directories check-box is checked. After refreshing the FrontPage web, the _fpclass folder should then be visible.

If you still have problems, use the FrontPage Editor HTML editing view to check that the Hover Button Applet HTML is correct (i.e. that the Applet codebase points to the folder containing the fphover.class Applet file). For example, the code for the "Special Offers" Hover Button is shown below:

<applet code="fphover.class" codebase="../_fpclass/" width="143" height="114">
<param name="text" value>
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="glow">
<param name="url" value="http://www.abiglime.com/webmaster/" valuetype="ref">
<param name="image" value="
hover1.if" valuetype="ref">
<param name="hoverimage" value="hover2.gif" valuetype="ref">
<param name="sound" value valuetype="ref">
<param name="hoversound" value="bellsound.au" valuetype="ref">

Other issues

Author: Brett Burridge
Date: 07/02/1998

More articles about FrontPage
More articles by Brett Burridge
Author Biography