layer visability on mouseover for netscape

[susjm]

I have an image-based menu and need to use layers for the submenus(which are also individual images), but haven't been able to find a Netscape compatible solution. Is there a function to show/hide layers on mouseover or mousedown that works for NN?

[Ian]

Although you are seeking a cross browser solution, I'm moving this topic from cross platform layout to the client side scripting forum.

------------------
Ian

Web Development - BIG Resources Inc
Head Guide - 123Webmaster.com (http://www.123webmaster.com/)
ian@123webmaster.com
BIG Resources.com (http://www.bigresources.com)
ICQ: 25828668

[kdjoergensen]

<div id="mydiv" style="position: absolute;">My div</div>

Note the style setting above. the style settings in <div> or <span> tags MUST be set to either position: absolute or position: relative for it to work in netscape.
Or you can use a <LAYER> tag (only recognized by netscape) in which case the position: absolute is implied (you dont need to set the style attribute then), or <ILAYER> tag in which case the position: relative is implied.

to hide/show in netscape:
document.mydiv.visibility = 'visible';
document.mydiv.visibility = 'hidden';

to hide/show in msie:
document.all.mydiv.style.visibility = 'visible';
document.all.mydiv.style.visibility = 'hidden';

Note: if you nest layers netscape need the complete reference to hide/show layers:

<span id="outer" style="position: relative;"><div id="inner" style="position: absolute;">Inner div text</div></span>

to hide the 'inner' div tag in MSIE:
document.all.inner.style.visibility = 'hidden';

to hide the 'inner' div tag in Netscape4:
doucment.outer.document.inner.visibility = 'hidden';

[susjm]

Could you help me out with the code to show/hide layers on the mousevent behavior of an image? I have no problem with IE, just NN.

[kdjoergensen]

Is this what you are looking for: :D

<script language="javascript">
<!--
function hideShow(layer,vis){
var obj;
if (document.getElementById){ //NS6+MSIE5
obj = document.getElementById(layer).style;
} else if (document.all) { //MSIE4
obj = document.all[layer].style;
} else if (document.layers) { //NS4.x
obj = document.layers[layer];
}
obj.visibility = vis;
}
//-->
</script>
..
..
<a href="#" onmouseover="showHide('layer1','visible')" onmouseout="showHide('layer1,'hidden')"><img name="img1" src="myimage1.gif"></a>

<a href="#" onmouseover="showHide('layer2','visible')" onmouseout="showHide('layer2,'hidden')"><img name="img2" src="myimage2.gif"></a>

<div id="layer1" style="position: absolute; top: 20px; left: 20px; visibility: hidden;">LAYER 1</div>

<br>

<div id="layer2" style="position: absolute; top: 20px; left: 200px; visibility: hidden;">LAYER 2</div>



[This message has been edited by kdjoergensen (edited 01-18-2001).]