Hide on Mouseover

[Jus S]

How do I get the red box to disappear once the user mouses over the text, then reappear when the user moves the mouse off of the text?

<p align="center"><a href=null>Hide Cell</a></p>

<table id="tableNode" align="center">
    <tbody>
        <tr><td colspan="30" rowspan="30" height="30" 

bgcolor="red"></td></tr>
   <tbody>
</table>

[jscheuer1]

Well it depends, given that simple markup (corrected slightly, to at least be valid in quirksmode - means on a page with no DOCTYPE), this would be about the easiest:

<p align="center"><a href="#" 
onmouseover="document.getElementById('tableNode').style.display='none';" 
onmouseout="document.getElementById('tableNode').style.display='';" 
onclick="return false;">Hide Cell</a></p>

<table id="tableNode" align="center">
    <tbody>
        <tr><td height="30" width="30" bgcolor="red"></td></tr>
   </tbody>
</table>

And that will remove it from the flow of the page. If you don't want it removed from the flow of the page, just to become invisible:

<p align="center"><a href="#" 
onmouseover="document.getElementById('tableNode').style.visibility='hidden';" 
onmouseout="document.getElementById('tableNode').style.visibility='';" 
onclick="return false;">Hide Cell</a></p>

<table id="tableNode" align="center">
    <tbody>
        <tr><td height="30" width="30" bgcolor="red"></td></tr>
   </tbody>
</table>

If you want to affect only the table cell itself, you would need to give it an id or get it as a part of the table's rows[0] cell's collection's 0 member. However you get it, at that point setting its display to none could throw off other rows/cells in the table if there were more than one row and/or cell. Using the visibility property wouldn't have this problem.

[Jus S]

jscheuer1,

Thanks for the options. Worked great.

Jus S