Tricky mouseover event for row

**Vjekoslav Begovic** · Jul 20 '05, 12:40 PM

Re: Tricky mouseover event for row

"Colin Steadman" <google@colinst eadman.com> wrote:
[color=blue]
> 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.
>[/color]

I hope this helps:

<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>
<script type="text/javascript">
function addEvents(){
var mytable=documen t.getElementByI d("mytable");
var rows=mytable.ge tElementsByTagN ame("TR");
for (var i=0; i<rows.length;i ++){
rows[i].onmouseover=se tToActive;
rows[i].onmouseout=set ToNormal;
}
}
function setToActive(){
var cells=this.getE lementsByTagNam e("TD");
for (var i=0; i<cells.length ; i++){
cells[i].className+="Ac tive";
}
}
function setToNormal(){
var cells=this.getE lementsByTagNam e("TD");
for (var i=0; i<cells.length ; i++){

cells[i].className=cell s[i].className.subs tring(0,cells[i].className.leng th-
6);
}
}
onload=addEvent s;
</script>
<body>
<table id="mytable" width="500" cellspacing="1" >
<tr>
<td class="normal"> A</td>
<td class="high">90 </td>
<td class="medium"> 50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal"> A</td>
<td class="high">90 </td>
<td class="medium"> 50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal"> A</td>
<td class="high">90 </td>
<td class="medium"> 50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal"> A</td>
<td class="high">90 </td>
<td class="medium"> 50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal"> A</td>
<td class="high">90 </td>
<td class="medium"> 50</td>
<td class="low">12</td>
</tr>
</table>
</body>
</html>

Vjekoslav

**Chris** · Jul 20 '05, 12:40 PM

Re: Tricky mouseover event for row

"Colin Steadman" <google@colinst eadman.com> wrote in message
news:4062dca4.0 312090827.7fbc7 4af@posting.goo gle.com...[color=blue]
> 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![/color]

Yes. I've adjusted your code below with two short Javascript functions
called on the mouseover and mouseout events:
One to activate each cell in the row and one to disactivate them.

Regards,
Chris.

<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="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="normal"> A</td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="high">90 </td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="medium"> 50</td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="low">12</td>
</tr>
<tr>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="normal"> A</td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="high">90 </td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="medium"> 50</td>
<td onmouseover="ac tive(parentNode )"
onmouseout="ina ctive(parentNod e)"
class="low">12</td>
</tr>
</table>

<script>
function inactive(rowObj ect) {
rowObject.child Nodes[0].className="nor mal";
rowObject.child Nodes[1].className="hig h";
rowObject.child Nodes[2].className="med ium";
rowObject.child Nodes[3].className="low ";
}
function active(rowObjec t) {
rowObject.child Nodes[0].className="nor malActive";
rowObject.child Nodes[1].className="hig hActive";
rowObject.child Nodes[2].className="med iumActive";
rowObject.child Nodes[3].className="low Active";
}

</script>
</body>
</html>

**Colin Steadman** · Jul 20 '05, 12:41 PM

Re: Tricky mouseover event for row

>[color=blue]
> Yes. I've adjusted your code below with two short Javascript functions
> called on the mouseover and mouseout events:
> One to activate each cell in the row and one to disactivate them.
>
> Regards,
> Chris.[/color]

Thanks Chris, that is exactly the effect I was after. I think I can
see how you've done it to.

Parentnode is presumably the row containing the cell which triggered
the event. And the childnode(s) of row are obviously the cells
themselves, and you are changing the style of these individually.
Very elegant I like it!

I'm going to ask t>[color=blue]
> Yes. I've adjusted your code below with two short Javascript functions
> called on the mouseover and mouseout events:
> One to activate each cell in the row and one to disactivate them.
>
> Regards,
> Chris.[/color]

Thanks Chris, that is exactly the effect I was after. I think I can
see how you've done it to.

Parentnode is presumably the row containing the cell which triggered
the event. And the childnode(s) of row are obviously the cells
themselves. Your functions are simply changing the styles of the
cells very precisely using this information. Very elegant I like it!

Thankyou very much.

Regards,

Colin

Tricky mouseover event for row

Tricky mouseover event for row

Comment

Comment

Comment