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.]

Re: How to highlight table cell on mouseDown?

J Krugman wrote on 02 jul 2004 in comp.lang.javas cript:
[color=blue]
> 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?
>[/color]

<table border=1><tr>
<td
onmousedown="th is.style.backgr oundColor='yell ow'"
onmouseup="this .style.backgrou ndColor='white' ">
1st cell content
</td>
<td
onmousedown="th is.style.backgr oundColor='yell ow'"
onmouseup="this .style.backgrou ndColor='white' ">
2nd cell content
</td>
</tr></table>

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

[Thomas 'PointedEars' Lahn]

Re: How to highlight table cell on mouseDown?

J Krugman wrote:[color=blue]
> 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?[/color]

Use event bubbling.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve nts-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.tagNa me.toLowerCase( ))
&& typeof (s = tgt.style) != "undefined"
&& typeof s.backgroundCol or != "undefined"
&& typeof s.color != "undefined" )
{
if (bWhat)
{
s.backgroundCol or = "...";
s.color = "...";
}
else
{
s.backgroundCol or = "";
s.color = "";
}
}
}
}

<table
onmousedown="hi ghlight(event, true)"
onmouseup="high light(event, false)">
...
</table>


PointedEars