Changing viz of layers using onmousein/out

[bensheard]

Hi
I have got the following code working almost perfect, except the one part I cant get right is that the layer disappears as soon as the mouse leaves the first cell in each of the layers instead of the table like I would want it. Try copying it into front page or something and see. Is there a way to fix it or a better way to do it? Thanks

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="17">
  <tr>
    <td width="20%" onmouseover="show(1)" height="17">Heading 1</td>
    <td width="20%" onmouseover="show(2)" height="17">Heading 2</td>
    <td width="20%" onmouseover="show(3)" height="17">Heading 3</td>
    <td width="20%" onmouseover="show(4)" height="17">Heading 4</td>
    <td width="20%" onmouseover="show(5)" height="17">Heading 5</td>
  </tr>
</table>
<div id = 'layer1' style = ' position:absolute; top:37; left:9; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(1)">
    <tr>
      <td width="100%">Option 1</td>
    </tr>
    <tr>
      <td width="100%">Option 2</td>
    </tr>
    <tr>
      <td width="100%">Option 3</td>
    </tr>
    </table>
</div>
<div id = 'layer2' style = ' position:absolute; top:37; left:196; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(2)">
    <tr>
      <td width="100%">Option 1</td>
    </tr>
    <tr>
      <td width="100%">Option 2</td>
    </tr>
    <tr>
      <td width="100%">Option 3</td>
    </tr>
    </table>
</div>
<div id = 'layer3' style = ' position:absolute; top:37; left:383; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(3)">
    <tr>
      <td width="100%">Option 1</td>
    </tr>
    <tr>
      <td width="100%">Option 2</td>
    </tr>
    <tr>
      <td width="100%">Option 3</td>
    </tr>
    </table>
</div>
<div id = 'layer4' style = ' position:absolute; top:37; left:570; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(4)">
    <tr>
      <td width="100%">Option 1</td>
    </tr>
    <tr>
      <td width="100%">Option 2</td>
    </tr>
    <tr>
      <td width="100%">Option 3</td>
    </tr>
    </table>
</div>
<div id = 'layer5' style = ' position:absolute; top:37; left:757; width:185; height:58; background-color:silver; z-index:10; visibility:hidden ' > 
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseout="hide(5)">
    <tr>
      <td width="100%">Option 1</td>
    </tr>
    <tr>
      <td width="100%">Option 2</td>
    </tr>
    <tr>
      <td width="100%">Option 3</td>
    </tr>
    </table>
</div>

<script type = "text/javascript">
<!--
function hide(id){
    var hello = "layer" + id;
    var name = document.getElementById(hello)
	name.style.visibility = "hidden";
	}
function show(id){
    var hello = "layer" + id;
    var name = document.getElementById(hello)
	name.style.visibility = "visible";
	}

	//-->
</script>

thanks

[ada80ro]

You could also add an event handler for mouseover on the div.

ex:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" onmouseover="show(5)" onmouseout="hide(5)">