Hover Buttons are a feature of FrontPage 2000 that allow you to create animated buttons that change form or color when the mouse pointer is moved over them. Hover Buttons can give life to your web pages. They seem to "come alive" and are great for producing a navigation bar for your site (example below).
|
|
FrontPage contains a Hover Button window to allow easy access to a wide range of functions supported by its Hover Button Java Applet. The Hover Buttons above were added using the FrontPage Editor command Insert | Component | Hover Button. The Hover Button window that allows you to customize the buttons seems complex at first. The image 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 (one or two words). Although you are limited to one of only four fonts (Arial, Courier, Sans Serif, or Times New Roman), there is a Font button if you want to change the font.
The maximum font size is 40 points, however, the smaller font sizes work and look more professional. It is also possible to change the Width and Height of Hover Buttons by using the appropriate fields in the main Hover Button window.
The second field enables you to set the URL that the hover button will link to.
Lastly, you can specify both a Button color and an Effect color. The Button color drop-down lists contain the most common colors. You can specify a custom color for both the Button and the Effect. The important thing to keep in mind is that the colors work well together. The most common combination is 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. The Maroon buttons glow with a red color when the mouse is moved over them. The images below show the other Effect options that can be applied using the Effect drop-down list in the Hover Button window.
Color fill:
Color average:
Glow:
Reverse glow:
Light glow:
Bevel out:
Bevel in:
Customized buttons:
Although the default effects and buttons look and work effectively on a web page, there might be occasions when you would prefer to use your own images.
Original images may be created using a scanner, digital camera or digital files from your desktop, the FrontPage 2000 Clip Art Gallery or from the Web. Using your favorite graphics program, make two identically sized images and save them. You can save them directly to the Images folder of your web file, or you can use File | Import..
In FrontPage 2000, insert a Hover Button as described above. In the Hover Button window, leave the Button text field blank and do not alter the Button color, Effect or Effect color. Add a URL in the Link to field if required.
Click on the Custom button at the bottom left 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 (or browse and point to the proper image file). In the main part of the Hover Button window, insure that the Width and Height fields are set to match the dimensions of your custom images. If you forget, the button can be resized in the Normal view of FrontPage 2000.
The completed example of a custom button is shown below (slide your cursor over image to see effect):
This is also great to use when you want to portray a "Before" and "After" picture.
Uploading the Hover Button Applet:
Because Java Applets are separate files to the actual web page, be sure they are uploaded to the web server along with the web page and all associated images.
If your pages are stored on a server which supports FrontPage server extensions, the required Applet will be uploaded automatically, and will reside in the _fpclass folder.
If you can't see this folder in your FrontPage web, use the FrontPage Explorer menu command Tools | Web Settings. In the FrontPage Web Settings window, click on the Advanced tab and confirm that the Show documents in hidden directories check-box is checked. After refreshing the FrontPage web, the _fpclass folder should then be visible.
If your web pages are stored on a server that does not support FrontPage server extensions, you may transfer the _fpclass folder along with your other files. Unfortunately this doesn't work on all servers. Alternatively you can load the .class files into the same directory as the page that uses them, as long as you make sure they are correctly referenced. That's what we've done for this page.
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 "Custom" Hover Button is shown below. This example uses .class files that reside in the same directory as the HTML page that uses them.
<applet code="fphover.class" codebase="./" width="214" height="159">
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="glow">
<param name="image" valuetype="ref" value="IMAGES/Pic4Shell.jpg">
<param name="hoverimage" valuetype="ref" value="IMAGES/Pic8Bird.jpg">
<param name="hoversound" valuetype="ref" value="Surf.au">
</applet>Other Considerations:
Since Hover Buttons are powered by Java, custom image files must reside on a web server. For security reasons, Java cannot directly access files on disk.
When using custom Hover Buttons, keep in mind that Java Applets cannot have transparent backgrounds. This could present a problem if you use a patterned background to your page.
Also, since Java is not supported by every browser, if you use your buttons as hyperlinks, it would be wise to provide an alternative means of navigating your site. Another consideration is that including the Hover Button Java Applet on your web page will slow the page loading time considerably..
Hover Buttons can cause FrontPage authors more headaches than anything else. Test any pages containing hover buttons after they have been uploaded to the web server. And as you should be doing with ANY web site you construct, don't forget to test them in a range of browsers as well!
For the Advanced User - Adding Sound Effects:
Hover Buttons cannot play the popular .wav sound file format common to PCs, so if your file is in this format you will need to follow the procedure below which will resamples the sound file to make it compatible with the Hover Button and then save it in the correct type of .au file format.
Download a sound sample editing program. Cool Edit is highly recommended shareware program. It would be 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 your clipboard.
Use the menu command File | New. When the New Waveform window appears, select a sample rate of 8000. Make sure that the Channels radio button is set to Mono and the 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, 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 can be very useful for working out why the Hover Button sound sample might not be working (in the example window below, the sound sample has been sampled at too high a frequency for the applet).
Victoria Gentry is Head Webmaster at CreativeLighthouse Web Design. She spends most of her time creating or updating websites and publishing e-zines and e-books. She is also involved in teaching others to make any business on the Web successful by becoming a "certified" Internet Business Consultant. The CreativeLighthouse site is at http://www.CreativeLighthouse.com.