home / articles / frontpage

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.

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:

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.

• Download a sound sample editing program. The shareware program Cool Edit is highly recommended, and well worth purchasing if you do a lot of work with sound samples.

• Open the .wav sound file into Cool Edit. Use the menu command Edit|Copy to copy this sample to the clipboard.

• Use the menu command File|New. When the New Waveform window appears, select a sample rate of 8000. Ensure that the Channels radio button is set to Mono and that Resolution is set to 8-bit. Click on the OK button to continue.

• Use the menu command Edit|Paste to copy the sound sample back from the clipboard.

• Use the File|Save As command to save the file into your FrontPage web.When saving the file, it is essential to change the Save as type field to Next/Sun (*.au;*.snd). Under the Options part of the Save Waveform As window, change the NeXT/Sun AU Format to mu-Law 8-bit.

• Back in FrontPage 98, double-click on your Hover Button, then on the Custom button in the Hover Button window. You can then enter the filenames of your .au format sound sample(s) into the On click and On hover fields in the Custom window.

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.

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">
</applet>

Other issues

• Hover Buttons are powered by Java, so custom image files must reside on a web server [for security reasons, Java is unable to directly access files on disk].

• If you use custom images for your button, don't forget that Java Applets cannot have transparent backgrounds. This could be a problem if you use a pattered backdrop to your page.

• Don't forget that Java isn't supported by every browser, so if you use them as hyperlinks, be sure to provide some alternative means of navigating your site. Another consideration is that including the Hover Buttton Java Applet on your web page will considerably slow down the amount of time taken to load that page.

• Hover Buttons seem to cause FrontPage authors more problems than anything else, so be sure to test pages containing them after they have been uploaded to the web server. Don't forget to test them in a range of browsers as well!

Author: Brett Burridge
Date: 07/02/1998

More articles about FrontPage
More articles by Brett Burridge
Author Biography