problema con capas

[chusete]

Tengo 3 enlaces que abren una capa cada uno diferente. El problema es que cuando sale la capa de uno de ellos se pone encima de las anteriores y cuando pulso los otros enlaces ya no puedo ver sus respectivas capa. Como puedo hacer para alternar la visibilidad de las capas? es decir, que cuando una esta visible las otras 2 estan ocultas?

el codigo del que parto es el siguiente:

<style type="text/css">
div.capa1{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
div.capa2{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
div.capa3{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
</style>

<script language="JavaScript">
function abrircapa (capa) {
document.getElementById(capa).style.visibility = 'visible';

}
</script>
-----
<img src="img1.gif" onClick="abrircapa('capa1')" >
<img src="img2.gif" onClick="abrircapa('capa2')" >
<img src="img3.gif" onClick="abrircapa('capa3')" >

espero que alguien encuentre una solucion, es muy importante.

gracias

[JavierB]

Hola, chusete.

Esto no lo he probado, pero creo que puede funcionar:

Código HTML:

<script language="JavaScript">
  function abrircapa (capa) { 
   for(i=1;i<4;i++) {
     c='capa'+i
     document.getElementById(capa).style.visibility = (c==capa) ? 'visible' : 'hidden';
    }
}

[Carlitos]

hola.

a ver si te sirve esto:

Código HTML:

<style type="text/css">
div.capa1{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
div.capa2{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
div.capa3{ position: absolute; top: 100; left: 100; width:550px; visibility:hidden;}
</style>

<script language="JavaScript">
function abrircapa (c1,c2,c3) { 
document.getElementById(c1).style.visibility = 'visible';
document.getElementById(c2).style.visibility = 'hidden';
document.getElementById(c3).style.visibility = 'hidden';

}
</script>
<img src="img1.gif" onClick="abrircapa('capa1','capa2','capa3')">
<img src="img2.gif" onClick="abrircapa('capa2','capa1','capa3')" > 
<img src="img3.gif" onClick="abrircapa('capa3','capa1','capa2')" > 
<div id="capa1" class="capa1">
esta es la capa 1
</div>
<div id="capa2" class="capa2">
esta es la capa 2
</div>
<div id="capa3" class="capa3">
esta es la capa 3
</div> 

[Carlitos]

Hola JavierB.

Muy buena tu idea, aunque si me permites, te voy a corregir un fallito.

Código:

<script language="JavaScript">
  function abrircapa (capa) { 
   for(i=1;i<4;i++) {
     c='capa'+i
     document.getElementById(c).style.visibility = (c==capa) ? 'visible' : 'hidden';
    }
}

lo que he cambiado es el 'getElementById(capa)' por 'getElementById(c)'

Genial script. mejor que el mio.

[chusete]

esto va cojonudamente, sois unos cracks tios, os debo una copa

[JavierB]

Gracias por la corrección, Carlitos Eso me pasa por no probar el código, además era un fallo tan tonto que seguro que me hubiera pasado un buen rato dandole vueltas

chusete: me alegro de que te haya funcionado y gracias por la copa

[Carlitos]

De nada JavierB.

Chusete. Gracias. Pero como no me la mandes por e-mail... Tómatela tú a mi salud.