How to highlight table cell on mouseDown?

[J Krugman]

I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?

Thanks in advance!

jill
--
To s&e^n]d me m~a}i]l r%e*m?o\v[e bit from my a|d)d:r{e:s]s.

[Evertjan.]

J Krugman wrote on 02 jul 2004 in comp.lang.javascript:

I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?

<table border=1><tr>
<td
onmousedown="this.style.backgroundColor='yellow'"
onmouseup="this.style.backgroundColor='white'">
1st cell content
</td>
<td
onmousedown="this.style.backgroundColor='yellow'"
onmouseup="this.style.backgroundColor='white'">
2nd cell content
</td>
</tr></table>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

J Krugman wrote:

I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?

Use event bubbling.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>

Quickhack:

function hightlight(e, bWhat)
{
if (e)
{
var tgt = e.target || e.srcElement;
var s;
if (tgt
&& tgt.tagName
&& /t[dh]/.test(tgt.tagName.toLowerCase())
&& typeof (s = tgt.style) != "undefined"
&& typeof s.backgroundColor != "undefined"
&& typeof s.color != "undefined")
{
if (bWhat)
{
s.backgroundColor = "...";
s.color = "...";
}
else
{
s.backgroundColor = "";
s.color = "";
}
}
}
}

<table
onmousedown="highlight(event, true)"
onmouseup="highlight(event, false)">
...
</table>
PointedEars