activar / desactivar capas

mikil · #1 (**permalink**) 20/09/2004, 05:59

tengo una tabla con muchos campos i quisiera organizarlos por pestañas las cuales debo activar i desactivar, i siempre se han de ver en el mismo sitio.
para ello he creado una tabla donde la primera fila son las opciones i la segunda una tabla donde pretendo ver los resultados.

por defecto al visualizar la pàgina estarà activa la primera opción y a partir de allí, activando i desactivando quiero mostrar el resto de las tablas.

la teoria fàcil pero no me aclaro en la pràctica me podeis ayudar.

gracias

(*) pd si es necesario adjunto el código pero es un poco liado, creo que si me adjuntais un ejemplo sencillo intentaré sacarlos yo

axy108 · #2 (**permalink**) 20/09/2004, 06:28

checa este ejemplo:

Código HTML:

<html>
<head>
<title>Caja Oculta</title>
<script language="javascript">
	function muestra_capa(capa){
		document.getElementById(capa).style.visibility = 'visible'
	}
	function oculta_capa(capa){
		document.getElementById(capa).style.visibility = 'hidden'
	}
</script>
</head>
<body>
<a href="#" onMouseOver="muestra_capa('caja1')" onMouseOut="oculta_capa('caja1')">Pasa por aqui</a><br><br>
<a href="#" onMouseOver="muestra_capa('caja2')" onMouseOut="oculta_capa('caja2')">Pasa por aqui</a>
<div id="caja1" style="position: absolute; height: 20; width: 300;top: 10px;left: 100px; visibility:hidden">
<input type="text" name="caja_oculta1">
</div>
<div id="caja2" style="position: absolute; height: 20; width: 300;top: 40px;left: 100px; visibility:hidden">
<input type="text" name="caja_oculta2">
</div>
</body>
</html>

espero te sirva

SALUDOS

mikil · #3 (**permalink**) 21/09/2004, 03:19

lo pruebo gracias

mikil · #4 (**permalink**) 27/09/2004, 02:54

bueno la cosa empieza a tomar forma.
El problema que tengo ahora es que quiero mostrar las cuatro capas en la misma posicion, dentro de una celda de una tabla pero si le digo position:relative no funciona, y si le pongo posicion absoluta debo indicar Top y left por lo que queda descentrado del resto de la tabla

como lo puedo hacer?

caricatos · #5 (**permalink**) 27/09/2004, 03:01

Hola mikil:

La idea de axy108 está bien, pero es mejor alternar entre los estilos display block/none

A los visibles le pones display = "block" y los ocultas con display = "none"

Es el sistema que uso en mi galería de caricaturas y va bien.

Saludos

mikil · #6 (**permalink**) 27/09/2004, 08:56

me puedes mostrar un breve ejemplo?

caricatos · #7 (**permalink**) 27/09/2004, 16:26

Hola otra vez:

Como he dicho antes, lo uso en mi galería de caricaturas: http://www.sucaricatura.com/2004/ no son pestañas pero cada página esn una capa con los estilos que te mencioné...

Ahora que lo pienso, tengo otra página en donde puse un sistema con pestañas y además es un Inspector de código:
http://www.pepemolina.com/DOM/index.html
Tienes que desplegar las notas finales y enlazar con "ejemplo frames" y en el frame inferior está el ejemplo.

Por si tienes pereza de dar esos pasos, te pongo el código:

Código:

<html>
	<head>
		<title>
			Pestañas
		</title>
		<script language="javascript">
			function ocultarTodo()	{
				indicadores = document.getElementById("cabecera").getElementsByTagName("div");
				for (var i = 0; i < indicadores.length; i ++)
					indicadores[i].style.display = "none";

			}
		</script>
	</head>

	<body>
		<div align=center>
			<div id="cabecera" >
				<span onclick="ocultarTodo(); document.getElementById('cuerpo1').style.display = 'block'"
					style="background-color: #eeeeee; border-width: 2px; border-style: ridge ridge none ridge; border-color: red;">
					Mostrar capa 1
				</span>
				&nbsp;
				<span onclick="ocultarTodo(); document.getElementById('cuerpo2').style.display = 'block'"
					style="background-color: #dddddd; border-width: 2px; border-style: ridge ridge none ridge; border-color: blue;">
					Mostrar capa 2
				</span>
				<div id="cuerpo1" style="width: 80%; border: 1px none red; background-color: #eeeeee; display: block;">
					Este es el contenido de la capa 1
					<br />
					<br />
					<br />
				</div>
				<div id="cuerpo2" style="width: 80%; border: 1px none blue; background-color: #dddddd; display: none;">
					Este es el contenido de la capa 2
					<br />
					<br />
					<br />
				</div>
			</div>
		</div>
	</body
</html>

Saludos

mikil · #8 (**permalink**) 28/09/2004, 04:58

gracias,
con tu ejemplo veo que no iba mal encaminado, ahora me lo estudio y completo me trabajo.

Seya · #9 (**permalink**) 28/09/2004, 08:59

La diferencia entre visible y display es que el visible:hidden si renderiza en objeto en cuestion, por lo que el 'hueco' queda ahí, aunque no se vea nada está ocupado, con el disply:none no renderiza el objeto y ese objeto puede ser ocupado por cualquier otro objeto, de ahí que necesites utilizar el display en lugar del visible.

Salu2!