Changing Table Colours [Archive]

Click to See Complete Forum and Search --> : Changing Table Colours

dennic

07-02-2003, 02:09 AM

Hi

Im creating a menu for a website that I am developing, I am using a table to contain the links to each page. What i want to do is when a user positions the mouse over the top of each link i want it to change to a different colour, can i do this? I have initially set the colour of the table using style sheets.

thanks, i dont know if this question belongs in this one or not, sorry

requestcode

07-02-2003, 06:44 AM

Here is an example of one way you could do it.
<html>
<head>
<title>Table Cell and Link Color Change</title>
<script language="JavaScript">
function chgtxt(obj,linkid,cellcolor,linkcolor)
{
if(document.getElementById) // IE5+ and NS6+ only
{
document.getElementById(obj.id).style.backgroundColor=cellcolor
document.getElementById(linkid).style.color=linkcolor
}
}
</script>
<style>
.tabClass {background-color:blue;}
.lnkClass {color:white;font-weight:bold;font-size:10pt;font-face:Arial;text-decoration:none}
</style>
</head>
<body>
<table align="center" border="1" width="300" height="20" cellspacing="0" cellpadding="0">
<tr>
<td id="td1" onClick="location.href='page1.html'" class="tabClass" align="center" valign="middle" onmouseover="chgtxt(this,'link0','white','blue')" onmouseout="chgtxt(this,'link0','blue','white')">
<a href="page1.html" id="link0" class="lnkClass">Click Me</a>
</td>
<td id="td2" onClick="location.href='page2.html'" class="tabClass" align="center" valign="middle" onmouseover="chgtxt(this,'link1','white','blue')" onmouseout="chgtxt(this,'link1','blue','white')">
<a href="page2.html" id="link1" class="lnkClass">Click Me</a>
</td>
</tr>
</table>
</body>
</html>

TBor

07-02-2003, 02:38 PM

Another idea for you - this is what I've done:

Set up 2 stylesheet classes for the table cells - one for "normal" display and one to display when the mouse is over it. Something like this (simplified):

<STYLE type="text/css">
.menu-normal {background-color:white;}
.menu-over {background-color:blue;}
</STYLE>

Then, set up each <TD> tag in your table that you want to change on mouseover to this:

<TD onmouseover="this.className='menu-over';" onmouseout="this.className='menu-normal';" class="menu-normal">

Hope this helps!
TBor

Jona

07-02-2003, 02:41 PM

Originally posted by dennic
Im creating a menu for a website that I am developing, I am using a table to contain the links to each page. What i want to do is when a user positions the mouse over the top of each link i want it to change to a different colour, can i do this? I have initially set the colour of the table using style sheets.

I have written a small tutorial (http://jona.t35.com/experiments/tableChildNodes_tutorial.html) on this effect. Hopefully, it will explain the code presented by requestcode and TBor a little better.

[J]ona

dennic

07-03-2003, 05:21 AM

thanks guys, that helps me heaps, its not that hard is it!

Jona

07-03-2003, 01:33 PM

Originally posted by dennic
thanks guys, that helps me heaps, its not that hard is it!

Nope. :)

[J]ona