Table Rollovers

Its not just text that can change color. Take a look at this menu system using table rollovers:

HOME   ABOUT US   INFO   PHOTOS   DOWNLOADS   LINKS

Lets split it up into two sections. The script and the tables. First here is the script.

<script language = "javascript">
<!--

function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#000099";
elem.style.cursor = 'hand'}

function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#000099";}

function LmDown(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#000099";}

function LmUp(path)
{location.href = path;}

//-->
</script>

You don't really need to know how it works, just place it before your table. Now heres the code for the table:

<table border="0" width="120" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/')" bgcolor="#FFFFFF"><A HREF="/" Class="navlink">&nbsp; HOME</a></td>
</tr>
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/aboutus/')" bgcolor="#FFFFFF"><A HREF="/aboutus/" Class="navlink">&nbsp;
ABOUT US</a></td>
</tr>
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/info/')" bgcolor="#FFFFFF"><A HREF="/info/" Class="navlink">&nbsp;
INFO</a></td>
</tr>
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/photos/')" bgcolor="#FFFFFF"><A HREF="/photos/" Class="navlink">&nbsp;
PHOTOS</a></td>
</tr>
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/downloads/')" bgcolor="#FFFFFF"><A HREF="/downloads/" Class="navlink">&nbsp;
DOWNLOADS</a></td>
</tr>
<tr>
<td width="100%" onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/links/')" bgcolor="#FFFFFF"><A HREF="/links/" Class="navlink">&nbsp;
LINKS</a></td>
</tr>
</table>
</td>
</tr>
</table>

Its the same as a text rollover using onMouseover and onMouseout, plus there is also onMouseDown. You also need to cinfigure the links forr the pages. The onMouseOver color sets your rollover color and your onMouseout is the normal color you have for the background color. The onMouseDown color is the color when you are clicking on the link. To add another row to the menu, just make another copy of the <tr>...</tr> tags and place it inside your table. There is also the onMouseUp command which tells the browser, when you have clicked on something and you release the button, it sends it to the page. This is already included in the link but, that won't cover the whole table box. Another link is that our links for the text are in java but all you have to do is do this in HTML tags. So all you have to do is to add the following code to your <td> tag:

onMouseover="LmOver(this, '#FFCC00')" onMouseout="LmOut(this, '#FFFFFF')" onMouseDown="LmDown(this, '#FFCC00')"
onMouseUp="LmUp('/links/')"

Add this code to each of our <td>'s and change the colors. Plus you can have different rollovers for different tables. Cool or what?