Show/Hide Layer onMouseOver...

[FleaPit]

I have this code working fine in IE and Opera, and kind of working(little off centre) in NS 4.7. However, it doesn't want to work at all in Netscape 7.*...

What's going wrong?

<script language="JavaScript">
function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.all) {
document.all[object].style.visibility = 'visible';
document.all[object].style.zIndex = 100;
}
}
function hide(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
</script>

<a href="#" onMouseOver="show('myId')" onMouseOut="hide('myId')">LINK</a>

<div id="myId" style="position:relative; width:200px; z-index:1; visibility: hidden; left: 0px; top: 10px">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td align="center">Hello World...</td>
</tr>
</table></div>

Any ideas?

[Birdman]

I could be wrong but I think getElementById is cross browser. Can't hurt to try anyhow. I also lightened it up a bit by using the same function to show/hide. I appologize if it doesn't work...I did not test it.

<script type="text/javascript">
function show(object,val) {
document.getElementById(object).style.visibility = val;
}
</script>

<a href="#" onMouseOver="show('myId','visible')" onMouseOut="show('myId','hidden')">LINK</a>

[Rambo Tribble]

What you have is a script that was written prior to the DOM Level 1 standard, approved in 1998. The document.layers is NS4 only, the document.all is IE4 vintage, but later IE's still handle it. NS6+ dropped layers altogether and supports only the W3C recommended DOM 1 window.document.getElementById() and other methods of that standard. IE5+ also supports the DOM 1.

By the way, I've found that including the window in the scope chain of a method improves the chances of cross-browser success.

[FleaPit]

Thanks Birdman... that worked a treat.