Show/Hide Layer Within Table Cell

[raphael232]

Hi, I want to show a layer within a td tag when you hover over the td tag and hide it when you move out of the td tag. So far I have the following:

<tr>
  <td hideLayer('Navigation1');" onclick="showLayer('Navigation1');">Test 1 <div onmouseover="showLayer('Navigation1')" id="Navigation1" onmouseout="hideLayer('Navigation1')" id="Navigation1" class="Navigation">
    <a href="Edit.htm">Edit</a><br />
    <a href="Delete.htm">Delete</a>
    </div>
  </td>
  <td>Cat 1</td>
</tr>
<tr>
  <td hideLayer('Navigation2');" onclick="showLayer('Navigation2');">Test 2 <div onmouseover="showLayer('Navigation2')" id="Navigation2" onmouseout="hideLayer('Navigation2')" id="Navigation2" class="Navigation">
    <a href="/Default.htm">Edit Attributes</a><br />
    <a href="/Default.htm">Edit Content</a><br />
    <a href="/Default.htm">Delete</a>
    </div>
  </td>
  <td>Cat 1</td>
</tr>

Here's my showLayer and hideLayer functions:

<script language="javascript">
    function hideLayer(whichLayer) {
        document.getElementById(whichLayer).style.zIndex = 0;
	document.getElementById(whichLayer).style.visibility = 'hidden';
    }
		
    function showLayer(whichLayer) {
	document.getElementById(whichLayer).style.zIndex = 1000;
	document.getElementById(whichLayer).style.visibility = 'visible';
    }
</script>

And here's my navigation style:

.Navigation {
	position: absolute;
	top: 0;
	right: 0;
	visibility: hidden;
	width: 150px;
}

The trouble is that the layer is bigger than the td tag and i need it to overlap the sides so i added a z-index which works if you hover over the first row and then the second row but if you back to the first row the layer only fills the td again.

Appreciate if someone could help. I'm sure it's just a simple mistake in my login. Thanks

 

[cLFlaVA]

there are many things wrong with your code. your first call to hideLayer is not within an event, which is required. secondly, you are defining your ID twice. third, if you hide the cell onmouseout, how will you ever click it or mouse over it to show it again? it'll be hidden...



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[raphael232]

Hi, sorry the first one was a mistake when copying across as i tried to simplify it, it actually should say:

<tr>
  <td onmouseout="hideLayer('Navigation1');"  onclick="showLayer('Navigation1');">Test 1 <div onmouseover="showLayer('Navigation1')" onmouseout="hideLayer('Navigation1')" id="Navigation1" class="Navigation">
    <a href="Edit.htm">Edit</a><br />
    <a href="Delete.htm">Delete</a>
    </div>
  </td>
  <td>Cat 1</td>
</tr>
<tr>
  <td onmouseout="hideLayer('Navigation2');" onclick="showLayer('Navigation2');">Test 2 <div onmouseover="showLayer('Navigation2')" onmouseout="hideLayer('Navigation2')" id="Navigation2" class="Navigation">
    <a href="/Default.htm">Edit Attributes</a><br />
    <a href="/Default.htm">Edit Content</a><br />
    <a href="/Default.htm">Delete</a>
    </div>
  </td>
  <td>Cat 1</td>
</tr>

i have corrected the second but still no change and the third i think you read the code wrong because the onmouseout is hiding the div within the td and onmouseover on the td is showing the div again.

Appreciate if you could take a look with the ammended code. Thanks