Help! I'm a stupid HTML bod and I dont do Javascript!
I have a grey coloured table that displays certain columns in either
red, green or orange to give meaning and emphasis to certain data.
What I want to do now is setup some kind of javascript event so that
when the user mouse's over a row the row changes colour to highlight
it. I've discovered however that I can only change the row into one
specific colour, and then back again into one specific colour using a
mouseover and mouseout event in the row.
I tried moving my event from the row tag into the table cell tags
thinking I was being clever (see below), but had I thought about it
I'd have realised this wasn't going to work either.
Can this actually be done in Javascript as I've exhausted my limited
javascript knowledge and dont know what else to try!
TIA,
Colin
<html>
<head>
<title>MO Test</title>
</head>
<style>
table
{
font-family: Arial;
font-size: 9;
}
td.normal
{
background-color: #C0C0C0;
}
td.normalActive
{
background-color: #B6B6B6;
}
td.high
{
background-color: #F4B6AE;
}
td.highActive
{
background-color: #E8ADA5;
}
td.medium
{
background-color: #EAEE84;
}
td.mediumActive
{
background-color: #DEE27D;
}
td.low
{
background-color: #84EE8E;
}
td.lowActive
{
background-color: #7DE287;
}
</style>
<body>
<table width="500" cellspacing="1">
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
</table>
</body>
</html>
