PDA

View Full Version : Hide on Mouseover



Jus S
07-31-2008, 02:33 PM
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
07-31-2008, 03:29 PM
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
07-31-2008, 06:44 PM
jscheuer1,

Thanks for the options. Worked great.

Jus S