[thelist] Table Row Rollover

Nick Bourgeois nick at gravityfree.com
Mon Oct 15 09:26:36 CDT 2001


> give the <tr> a unique id and reference the style properties for the <tr>
> using the id in the mouse triggers in the <td>
>
> Example using IE DOM:
>
> <tr id="abc">
>   <td
> onmouseover="document.all.abc.styles.backgroundColor='red';">whatever</td>
> </tr>

Yeah, I tried that, but it didn't work.  It'll work when I give the <td> an
id, but not for a <tr>.  Here's my code (kudos to Jeff):

JS:
function trRollOver(obj, state) {
  document.getElementById(obj).style.backgroundColor = (state == 'on') ?
'highlight' : 'window';
  document.getElementById(obj).childNodes[0].style.color = (state == 'on') ?
'highlighttext' : 'windowtext';
}

HTML:
<tr class="menu" onMouseOver="trRollOver('blah', 'on')"
onMouseOut="trRollOver('blah', 'off')">
 <td id="blah" align="center" valign="middle">
  <a href="javascript://" onMouseOver="trRollOver('blah', 'on')"
onMouseOut="trRollOver('blah', 'off')">Mouse over me</a>
 </td>
</tr>

Nick Bourgeois
GravityFree
nick at gravityfree.com





More information about the thelist mailing list