activar capa mediante enlace

juglar · #1 (**permalink**) 22/10/2004, 09:01

quiero tengo 4 enlaces, cada uno con una información diferente, me gustaría que al pinchar en uno de esos enlaces saliera en un espacio, pero si pincho otro enlace saliera tb en ese mismo sitio, y el anterior se quitara, como si estuvieran superpuesto.
Entonces he pensado hacerlo mediante capas, cada información en una capa y que estén ocultas y superpuestas, pero el problema es como hacer el enlace y que se active, y que cuando pinche otro enlace desactive el primero y activar el 2. Un poco lioso no?
Si hay una forma de hacerlo más fácil, decirlo. GRACIAS

caricatos · #2 (**permalink**) 22/10/2004, 15:45

Hola juglar:

La verdad es que no es muy difícil...

Tendrías que llevar un array con las capas que quieras usar, y para cada enlaces ocultar todas y luego mostrar la seleccionada...

<div id=capa1 >
...
</div>

<div id=capa2 >
...
</div>

<div id=capa3 >
...
</div>

luego...
var capas = ["capa1", "capa2", "capa3"];

var mostrar(n) {
for (var i = 0; i < capas.length; i ++) document.getElementById(capas[i]).style.display = "none";
document.getElementById(capas[n]).style.display = "block";
}

Saludos

juglar · #3 (**permalink**) 24/10/2004, 06:01

He echo una prueba, y he puesto lo que me dijiste, no se donde lo he puesto mal. Míralo a ver donde he fallado.

------------------------------------------------------------------------
<html>
<head>
<title>capas</title>
<script language="JavaScript" type="text/JavaScript">
var capas = ["layer1", "layer2", "layer3","layer4"];

var mostrar(n) {
for (var i = 0; i < capas.length; i ++) document.getElementById(capas[i]).style.display = "none";
document.getElementById(capas[n]).style.display = "block";
}
</script>
</head>

<body>

<div id="Layer1" style="position:absolute; left:15px; top:21px; width:101px; height:92px; z-index:1; visibility: hidden;">capa
1 </div>
<div id="Layer2" style="position:absolute; left:126px; top:19px; width:122px; height:98px; z-index:2; visibility: hidden;">capa
2 </div>
<div id="Layer3" style="position:absolute; left:256px; top:19px; width:141px; height:99px; z-index:3; visibility: hidden;">capa
3 </div>
<div id="Layer4" style="position:absolute; left:409px; top:17px; width:128px; height:104px; z-index:4; visibility: hidden;">capa
4 </div>

<p> </p>
<p> </p>
<p> </p>
<p><a href="javascript:mostrar(4);">este</a></p>
</body>
</html>
---------------------------------------------------------
en el ejemplo quiero activar mediante el enlace llamado "este" el layer 4, pero no me sale

caricatos · #4 (**permalink**) 24/10/2004, 07:16

Hola otra vez:

Según tu ejemplo no exixte la capa[4]... En los arrays, se empieza la numeración por 0, o sea tines que usar mostrar(0)... mostrar(3)

Saludos

juglar · #5 (**permalink**) 24/10/2004, 12:17

he puesto
<p><a href="javascript:mostrar(2);">este</a></p>
pero tampoco sale, me dice que "no hay objeto", creo que el fallo está en la linea de arriba pero he probado con todo y nada

caricatos · #6 (**permalink**) 24/10/2004, 16:53

Hola otra vez:

"layer1" y "Layer1" son dos cosas distintas... Ten cuidado con las mayúsculas.

Saludos