Button Bar Instructions

DHTML Button Bar

Tips

Details

Instructions

Copy and paste the following Paragraph (PBUTTON) and Anchor (PBUTTONA) CSS Style definitions in between the <HEAD> and </HEAD> tags at the top of your HTML page:

<style>  </style>

Copy and paste the following JavaScript PBUTTONobject definition and declaration just before the </BODY> and </HTML> tags at the bottom of your HTML page:

<script language="JavaScript1.2"></script>

Create a table with a cell to contain each button:

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
    </tr>
</table>

. . . .

Add the text and/or images you want on your buttons to each table cell (button):

<td>Overview </td>
<td>Instructions </td>
<td>Tips </td>
<td>Details </td>

Overview Instructions Tips Details

Make the text and images for each button into a single hyperlink, to the URL where you want your buttons to link to.

<td><a href="rpbbar.htm">Overview </a></td>
<td><a href="rpbbari.htm">Instructions </a></td>
<td><a href="rpbbart.htm">Tips </a></td>
<td><a href="rpbbard.htm">Details </a></td>

Overview Instructions Tips Details

Set the background color of each table cell to the color you want for your button. There are 2 ways to do this for compatability with older browsers:

In cell properties, set the background color of the cell:

<td bgcolor="#582800"><a href="rpbbar.htm">Overview </a></td>

In cell properties, click on the style button, and set the background color in the style properties:

<td style="background-color: rgb(88,40,0)"><a href="rpbbari.htm">Instructions </a></td>

The first method will show the color if the browser supports it, the second method will show the page background in older browsers.

<td bgcolor="#582800"><a href="rpbbar.htm">Overview </a></td>
<td style="background-color: rgb(88,40,0)"><a href="rpbbari.htm">Instructions </a></td>
<td style="background-color: rgb(88,40,0)"><a href="rpbbart.htm">Tips </a></td>
<td style="background-color: rgb(88,40,0)"><a href="rpbbard.htm">Details </a></td>

Overview Instructions Tips Details

The next step is to assign a Block Text HTML element to the contents of each button. I use <ADDRESS> because it intrinsically doesn't have trailling paragraph spacing in most browsers. Put your cursor on the text of a cell, then using the FrontPage Format Toolbar, set the paragraph style to Address. Do this to each cell containing a button.

<td bgcolor="#582800"><address><a href="rpbbar.htm">Overview </a></address></td>

Overview

Instructions

Tips

Details

This stage completes the base HTML layer for the buttons, and is how your buttons will appear in older browsers.

For each button cell, assign the PBUTTON style to the Address element, and PBUTTONA to the Anchor element.

Put your cursor on the text of a cell, click your right mouse button, and open Paragraph Properties. Push the Style push button, and set the class to PBUTTON.

<td bgcolor="#582800"><address class="PBUTTON"><a href="rpbbar.htm">Overview </a></address></td>

Similarly, open the Hyperlink Properties for each button cell, push the Style push button, and set the class to PBUTTONA.

<td bgcolor="#582800"><address class="PBUTTON"><a href="rpbbar.htm" class="PBUTTONA">Overview </a></address></td>

Overview

Instructions

Tips

Details

The basic button bar should be working in MS Internet Explorer 4.x (with my colors) at this stage.

To change the colors of the button bar, go to the top of the HTML page where the PBUTTON style is defined:

<style><!--
P.PBUTTON
{
    .
    .
    .
    background-color: rgb(85,43,0);
    border-color: rgb(135,90,45);
    color: rgb(204,204,153);
}

background-color: Sets the color for the face of the button.
border-color: Sets the color for the sides of the button.
color: Sets the color for normal text (not part of a link).

To change the color of the text on the button bar, go to the top of the HTML page where the PBUTTONA link styles are defined:

A.PBUTTONA:LINK
{
    color: rgb(240,240,208);
}
A.PBUTTONA:VISITED
{
    color: rgb(204,204,153);
}
A.PBUTTONA:ACTIVE
{
    color: rgb(255,160,56);
}
A.PBUTTONA:HOVER
{
    color: rgb(255,160,56);
}

The LINK, VISITED, ACTIVE colors, control the color of the Link text on the buttons. The HOVER color only works in Internet Explorer 4.x, and is the color used when the mouse is over the link.

To set the size of the buttons:

In MS Internet Explorer 4.x, the size of a button is controlled by the size of the table cell for the button.

In Netscape 4.x, the size is controlled in the PBUTTON style definition. Un-comment the width: specification and set the size to what looks good:

P.PBUTTON
{
font-size: 90%; /* larger | smaller | 100% */
width: 100px; /* 6em | 100% | auto */

The font-size: specification in the PBUTTON style definition, controlls the size of the font on the buttons.

Overview

Instructions

Tips

Details

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