Capas - Mostrar 1 y ocultar el resto

[Scorpiatus]

Hola Amigos,

Tengo una página que tiene 6 capas, y por otra parte tengo 6 imagenes que funcionan como botones.

Lo que quiero es:

- Al iniciarse, solo se muestre la capa 1 y las otras 5 estén ocultas.
- Que al hacer clic sobre una de las imágenes, se oculte la capa que está visible y se muestre una capa en particular.

Hasta ahora, lo que logré es que al hacer clic sobre una imagen se muestre u oculte una única capa con el siguiente código:

Código:

<script LANGUAGE="javascript"> <!--
var capa
var antes
function Main_Switch(idCapa){
if (document.all) capa = eval(idCapa + ".style");
if (document.getElementById) capa = eval('document.getElementById("' + idCapa + '").style');
if ((capa.visibility == "hidden") || (capa.visibility == "hide"))
{capa.visibility="visible" ;
capa.display="";
}
else
{
capa.visibility="hidden";
capa.display="none";}
if (antes==null)
{antes=capa;}
else
{if (antes!=capa){antes.visibility="hidden" ; antes.display="none"; antes=capa;}
}
}
//-->
</script>

En la imagen coloco lo siguiente:

Código:

<a href="#" onclick="Main_Switch('foto_1')";><img src="1.jpg"></a>

foto_1: es la capa que deseo mostrar u ocultar.

La idea sería decirle que quiero
Este código lo copié de "Shiryu_Libra" de aquí mismo.

Si pudieran ayudarme, sería genial, recién comienzo con Css y Javascript.

[Adler]

Hola

Podrías meter todas las capas en un div

Código html:

<div id="contenedor">
capa1
capa2
..
</div>
 

ahora en la función con getElementsByTagName sacas todas capas

Código javascript:

var cantidad = document.getElementById("contenedor").getElementsByTagName("DIV")
for (var = 0; i < cantidad.length; i++) {
if (cantidad(i).style = "block"); cantidad(i).style = "none";
}
 
// aquí el resto
 

Suerte