Mouseover Colors for table Cells

This is for Internet Explorer only, it will not work at all on Netscape or MSNTV.

You can change the background color of a table cell when you mouseover the cell.

Here is an example of this using two colors.

Pretty Cool Draac

Here is the code for the two color mouseover change for a table cell.

<table border="3" bordercolor="#ff0000" cellpadding="10" cellspacing="2">
<tr><td align="center" bgcolor="#0000ff" onMouseOver="this.bgColor='#ff0000'" onMouseOut="this.bgColor='#0000ff'">
<font size="4" color="#ffffff" face="verdana">
<b>Pretty Cool Draac</b>
</font>
</td></tr></table>

Here is an example of this using three colors. The third color (black in the example below) is the default bgcolor of the cell, it will not return to the default color until the page is reloaded or entered again.

Pretty Cool Draac

Here is the code for the three color mouseover change for a table cell.

<table border="3" bordercolor="#ff0000" cellpadding="10" cellspacing="2">
<tr><td align="center" bgcolor="#000000" onMouseOver="this.bgColor='#ff0000'" onMouseOut="this.bgColor='#0000ff'">
<font size="4" color="#ffffff" face="verdana">
<b>Pretty Cool Draac</b>
</font>
</td></tr></table>

Using this mouseover table cell color change, you can create a cool navigational table for your web site.

Draac.Com

Draac's Gifs 123

Table Talk !

Table Tricks

Easy CSS Tricks

Draac's Tools Box

Draac's Html Extras

Here is the code for the navigation table above. Change the colors, make it longer or shorter, edit this to suit your needs.

<table border="2" bordercolor="#5f9ea0" cellpadding="3" cellspacing="2">
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/">
<font size="2" color="#ffffff" face="verdana"><b>
Draac.Com
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://gifs123.tripod.com/">
<font size="2" color="#ffffff" face="verdana"><b>
Draac's Gifs 123
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/tabletalk.html">
<font size="2" color="#ffffff" face="verdana"><b>
Table Talk !
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/tabletricks.html">
<font size="2" color="#ffffff" face="verdana"><b>
Table Tricks
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/css/csstricks.html">
<font size="2" color="#ffffff" face="verdana"><b>
Easy CSS Tricks
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/generators.html">
<font size="2" color="#ffffff" face="verdana"><b>
Draac's Tools Box
</b></font></a>
</td></tr>
<tr><td align="left" bgcolor="#483d8b" onMouseOver="this.bgColor='#8a2be2'" onMouseOut="this.bgColor='#483d8b'">
<a href="http://www.draac.com/htmlextrasmisc.html">
<font size="2" color="#ffffff" face="verdana"><b>
Draac's Html Extras
</b></font></a>
</td></tr></table>