How to Create DHTML Buttons Using Table Cells and Style Sheets

ID: Q221214

The information in this article applies to:

Microsoft Internet Explorer Administration Kit versions 4.0, 4.01, 4.01a, 5.0

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/

Additional query words: stylesheet


Keywords          : 
Version           : WINDOWS:4.0,4.01,4.01a,5.0
Platform          : WINDOWS 
Issue type        : kbhowto

Last Reviewed: March 18, 1999