capas ocultar y mostrar pero solo siempre visible 1

susaninhax · #1 (**permalink**) 28/09/2006, 13:38

Hola apañeros;

Tengo un problemilla que creo que tiene facil solución pero no lo veo.
Necesito que al pinchar en un enlace se me muestre una capa, y que cuando pinhe en el segundo enlace me desaparezca la capa 1 y me muestre la capa 2, y así con la tercera. También necesito que me aparezcan las capas en el mismo sitio misma situación. Tengo esto pero creo que mi problema es a la hora de convinar lo de ocultar y mostrar.

Os dejo el script, porfa ayuda!!!!!!:

Código HTML:

<script language="JavaScript">

var ie4=(document.all&&navigator.userAgent.indexOf("Opera")==-1);
var ns6=(document.getElementById&&!document.all);
var ope=(navigator.userAgent.indexOf("Opera")!=-1);
var ns4=(document.layers);
var retraso=setTimeout("",100);
var nTemp=0;
var lnx=0;
var lny=0;

function OcultaCapa(cid1) {
  capa = document.getElementById(cid1);
  for (i=0; ele=document.getElementsByTagName('div')[i]; i++)
    if (ie4||ns6||ope) 
      ele.style.visibility="hidden";
    else 
      ele.visibility="hide";
   if (ie4||ns6||ope) 
      capa.style.visibility="visible";
   else 
      capa.visibility="visible";
   }

</script>

</head>
<body>
<p><a href="#" class="azul" onClick="OcultaCapa('info01')">- 1 Interiores</a></p>
<p><a href="#" class="azul" onClick="OcultaCapa('info02')">- 2 Exteriores</a></p>
<p><a href="#" class="azul" onClick="OcultaCapa('info03')">- 3 Zonas Com&uacute;n </a></p>

<div id="info01">prueba</div>
<div id="info02">pipi</div>
<div id="info03">popo</div>

porfa porfa alguien sabe¿?

Cap.Buscapina · #2 (**permalink**) 28/09/2006, 17:21

holas,

groso modo podria ser:

Código HTML:

<html>
<head>
<script>
var anterior;

function mostrar(capa){
if(anterior){
document.getElementById(anterior).style.visibility="hidden";
}
document.getElementById(capa).style.visibility="visible";
anterior=capa;
}
</script>
</head>

<body>
<p><a href="#" class="azul" onClick="mostrar('info01')">- 1 Interiores</a></p>
<p><a href="#" class="azul" onClick="mostrar('info02')">- 2 Exteriores</a></p>
<p><a href="#" class="azul" onClick="mostrar('info03')">- 3 Zonas Com&uacute;n </a></p>

<div id="info01" style="position:absolute;left:300px;top:200px;width:200px;height:100px;background-color:#99FF00;visibility:hidden;">prueba</div>
<div id="info02" style="position:absolute;left:300px;top:200px;width:200px;height:100px;background-color:#99CCFF;visibility:hidden;">pipi</div>
<div id="info03" style="position:absolute;left:300px;top:200px;width:200px;height:100px;background-color:#FFFF99;visibility:hidden;">popo</div>
</body>
</html>

saludos