How to Create DHTML Buttons Using Table Cells and Style Sheets (221214)

SUMMARY

Internet Explorer versions 4.0 and later provide a rich set of programming features for Web authors through Dynamic HTML (DHTML) scripting. One of the more useful features allows you to dynamically change text attributes. This article describes how to use this functionality to create button-style behavior using DHTML and style sheets.

MORE INFORMATION

The following example code demonstrates how to create buttons using style sheets for color definitions and Dynamic HTML to provide color change functionality, while still preserving HTML links for older browsers.

<html>
<head>
<title>DHTML Buttons</title>
<style>
A
{
    COLOR: white;
    TEXT-DECORATION: none
}
.normal
{
    BACKGROUND-COLOR: black;
    COLOR: white
}
.hover
{
    BACKGROUND-COLOR: blue;
    COLOR: white
}
</style>
</head>
<body>
<div align="center"><center><table cellspacing="3" border="0">
  <tr>

    <th width="100" class="normal" align="center"
      onMouseover="this.className='hover'"
      onMouseout="this.className='normal'">
    <a href="LINK1.HTM">LINK 1</a></td></th>

    <th width="100" class="normal" align="center"
      onMouseover="this.className='hover'"
      onMouseout="this.className='normal'">
    <a href="LINK2.HTM">LINK 2</a></td></th>

    <th width="100" class="normal" align="center"
      onMouseover="this.className='hover'"
      onMouseout="this.className='normal'">
    <a href="LINK3.HTM">LINK 3</a></td></th>

  </tr>
</table></center></div>
</body>
</html>

For more information on Microsoft scripting technologies, see the following Web site:

http://msdn.microsoft.com/scripting/