Div Layers

neville

I need to have a layer show on mouseover and be hidden on mouseout of a link.... How do I do this ?

document.layerid.visibility='show';

layerid.style.visibility='visible';

Both the above statements don't work for making the layer visible in Netscape but it does for IE.

Can anyone help me with this or point me to some place where I can get help in easy examples.

Thanks a Lot.

thegonz

use the following code and modify it...


<head>
<title>Untitled Document</title>
<script language="JavaScript">

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="layer" style="position:absolute; left:28px; top:73px; width:91px; height:77px; z-index:1; visibility: hidden">hidden 
  layer</div>
<br><a href="" onMouseOver="MM_showHideLayers('layer','','show')">show layer</a><br>
<a href=""  onMouseOver="MM_showHideLayers('layer','','hide')">hide layer</a><br>
</body>

neville

Hi,

I'm not using frames.....would the above code work for IE ?

When I removed the style property from the div tag, I could see it in netscape.... with the style property I could not .....

What does z-index stand for?

Thanks

thegonz

umm i forget, but i didnt check if it works in netscape. and thats not frames. i used that html in ie and it works fine showing and hiding the layers

tnelson

I wrote the following to hide and show layers a few weeks back. This will work in NS4, NS6, IE4, IE5, and IE5.5 NS6 and IE5.5 will use the same branch of logic.

The shoCat takes the name of a layer that will be shown. It then takes the LastLayer and sets it to hidden so that you have only one call to make. So something like this is how it would be used. You first need to set the LastLater to a real div name, start by setting all of your divs to hidden. The following will show the div Content2 and hide the Content1 layer it if it is not hidden when you clicked on the link.