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