DHTML Button Bar

Tips

If your button bar disappears in Netscape 4.x, you either lost or forgot the closing Block Text HTML tag in the button table cells. FrontPage Users note, FrontPage will delete the trailing </p> tag, if you used a paragraph element (<p>) instead of the Address element (<address>).

As I link in my style sheets, here is one I get. If the buttons only appear as 3D buttons after you pass your mouse over them, you may have forgot to include the Style Definitions.

Some things to try, if Netscape 4.x becomes unstable when viewing your page:

Avoid nested tables. Netscape sometimes produces bizzar and seemingly unrelated side effects if nested tables are used on a page.

Try putting all your styles into an external linked style sheet, eg:
     <link rel="stylesheet" href="icolor0.css" type="text/css">

Netscape trapped when I put a mouse event handler (that did nothing) into the Anchor HTML tag for one of these buttons (onmouseover="..."). So you may want to avoid any JavaScript within the HTML for the buttons.

Netscape is most unstable when you make changes to a page. After you are done editing your page, close everything, restart netscape, then try viewing your page.

The JavaScript which handles the buttons, saves and calls existing onMouseOut, onMouseOver, and onMouseDown event handlers on the Anchor (link) tag for a button, and returns the return value from the handler. So it is possible to add a simple MouseOver effect to an image on a button. Note: this can make Netscape more unstable.

The line that ties the JavaScript to the buttons (var buttonBar = ...), is at the bottom of the page (at the end of the JavaScript code you pasted). The class names on this line must match the class names in your HTML for the Address <address> and Anchor <a> tags. Which must also match the names used in the <Style> definition.

/* instantiate a PBUTTONobject to handle your buttons JES 12/23/98 */
/* var ObjectName = new PBUTTONobject("ObjectName","PBUTTONclassName","PBUTTONAclassName") */
/* ObjectName = the name of the variable you are creating */
/* PBUTTONclassName = Paragraph style className used in the HTML */
/* PBUTTONAclassName = Anchor block style className used in the HTML */
var buttonBar = new PBUTTONobject("buttonBar","PBUTTON","PBUTTONA");

The code will handle multiple button bars with the same style. To create a second button bar with a different style:

Create another CSS Paragraph style like P.PBUTTON
example:  P.BBTN { ... }

Create another set of CSS Anchor styles like A.PBUTTONA
example:

A.BBTNA { ... }
A.BBTNA:LINK { ... }
A.BBTNA:VISITED { ... }
A.BBTNA:ACTIVE { ... }
A.BBTNA:HOVER { ... }

In the HTML for your second button bar, set the corresponding class parameters to BBTN and BBTNA.
example:

<td bgcolor="#552B00"><address class="BBTN"><a href="Overview.html" class="BBTNA"> Overview </a></address></td>

Add another JavaScript button bar object at the end of your page, right after the 'var buttonBar = new PBUTTONobject ... '
example:

var buttonBar = new PBUTTONobject("buttonBar","PBUTTON","PBUTTONA");
var BBar = new PBUTTONobject("BBar", "BBTN","BBTNA");

Here is a sample of a second button bar:

Overview

Instructions

Tips

Details

 [Home] [ScrapBook] [Chat] [Links] [Contact] [FrontPage]
This page hosted by Get your own Free Home Page
JES - 01/10/99