onclick on table color

[johncmt]

hi all,
let me just state what I have, and what do I want.
I use the onmouseover, and onmouseout to change the table(which contain link) color. I have done that.
what I want now is after I click the link, I want the color stay as the onmouseover color. let me make it more clear, say I got table cell(home, about) for link with onmouseout color = white, onmouseover = red. now I want: click on home with make the color permanent, but if I click on about, the home color will turn back to onmouseout color, and about become onmouseover color permanent. I don't know is there a similar code out there. or if i have to write it, what is the best way? cuz I am new to javascript

hope you got what I want and what I meant
thx in advance

[whoisgregg]

There has got to be a more elegant way of writing this code, but it does work:

<script type="text/javascript">
<!--
function ChangeBackground(element,act) {
//alert(element.flag);
if (act == 'click') {
if (element.flag!= 'clicked') {
element.flag = 'clicked';
element.style.backgroundColor = '#CC99CC';
} else {
element.flag = '';
element.style.backgroundColor = '#999999';
}
}
if (act == 'out') {
if (element.flag!= 'clicked') {
element.style.backgroundColor = '#FFFFFF';
} else {
element.style.backgroundColor = '#CC99CC';
}
}
if (act == 'over') {
if (element.flag!= 'clicked') {
element.style.backgroundColor = '#999999';
} else {
element.style.backgroundColor = '#CC99CC';
}
}
}
-->
</script>

<table border="1" cellpadding="5">
<tr onmouseover="ChangeBackground(this,'over');" onmouseout="ChangeBackground(this,'out');" onclick="ChangeBackground(this,'click');">
<td>Example Cell 1</td>
<td>Example Cell 1</td>
<td>Example Cell 1</td>
</tr>
</table>

Can anyone clean up this code? I've still not got the hang of the shorthand logic expressions. :(

[orion_rus]

Hello i think it's a bad way to use something like element.flag and other properties what have bad crossbrowser view.
I suggest you to do this
you have
a <tr><td></td></tr>
make in a tr class <tr class='needtohighlight'>...</tr>
onmouseover you need to change className to className+'hover' on onmouseout you need to cut a 'hover' from className
in onclick you need to change the className to another className (like 'alreadhighlight'). and make a 'alreadyhighlighthover' class equal to a 'alreadyhighlight'.
I hope it helps. If you don't know how to do this i can post here working example. But i think it's much more interesting to make it with your own hands!
Good luck to you