Foros del Web » Programando para Internet » Javascript »

Mostrar/ocultar capas

 Estas en el tema de Mostrar/ocultar capas en el foro de Javascript en Foros del Web. Hola, encontre un código que sirve para mostrar y ocultar capas, funciona perfectamente, pero lo quiero saber si en vez de tener una funcion llamada ...
  #1 (permalink)  
Antiguo 23/07/2007, 17:53
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 18 años
Puntos: 36
Pregunta Mostrar/ocultar capas
Hola, encontre un código que sirve para mostrar y ocultar capas, funciona perfectamente, pero lo quiero saber si en vez de tener una funcion llamada mostrar1, mostrar2 y mostrar3 (lo mismo con la funcion ocultar), podria tener una sola funcion llamada por ejemplo mostrar y que sirva para las 3 capas.

Código HTML:
<html>
<head>

<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar1(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off1').style.display=VISIBLE;
  document.getElementById('ver_on1').style.display=OCULTO;
}
 
function ocultar1(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off1').style.display=OCULTO;
  document.getElementById('ver_on1').style.display=VISIBLE;
}
</script>

<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar2(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off2').style.display=VISIBLE;
  document.getElementById('ver_on2').style.display=OCULTO;
}
 
function ocultar2(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off2').style.display=OCULTO;
  document.getElementById('ver_on2').style.display=VISIBLE;
}
</script>


<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar3(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off3').style.display=VISIBLE;
  document.getElementById('ver_on3').style.display=OCULTO;
}
 
function ocultar3(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off3').style.display=OCULTO;
  document.getElementById('ver_on3').style.display=VISIBLE;
}
</script>



</head>
<body>


<div id="ver_on1"><a href="#" onclick="mostrar1('bloque1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar1('bloque1'); return false">Ocultar bloque1</a></div>

<div id="bloque1" style="display: none">
<p>Contenido bloque1</p>
</div>




<div id="ver_on2"><a href="#" onclick="mostrar2('bloque2'); return false">Mostrar bloque2</a></div>

<div id="ver_off2" style="display: none"><a href="#" onclick="ocultar2('bloque2'); return false">Ocultar bloque2</a></div>

<div id="bloque2" style="display: none">
<p>Contenido bloque2</p>
</div>






<div id="ver_on3"><a href="#" onclick="mostrar3('bloque3'); return false">Mostrar bloque3</a></div>

<div id="ver_off3" style="display: none"><a href="#" onclick="ocultar3('bloque3'); return false">Ocultar bloque3</a></div>

<div id="bloque3" style="display: none">
<p>Contenido bloque3</p>
</div>




</body>
</html>
Gracias
  #2 (permalink)  
Antiguo 24/07/2007, 02:16
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 20 años
Puntos: 9
Re: Mostrar/ocultar capas
Si, simplemente añades dos parametros a las funciones:

Código: 
<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById(ver_off).style.display=VISIBLE;
  document.getElementById(ver_on).style.display=OCULTO;
}
 
function ocultar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById(ver_off).style.display=OCULTO;
  document.getElementById(ver_on).style.display=VISIBLE;
}
</script>
Cuando lo llames, deberas dar a ver_off (el parametro va sin comillas) los valores 'ver_off1', 'ver_off2' y 'ver_off3' (los valores si llevan comillas) e idem con ver_on
  #3 (permalink)  
Antiguo 24/07/2007, 16:31
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 18 años
Puntos: 36
Exclamación Re: Mostrar/ocultar capas
Hola PosProdukcion gracias por tu ayuda. Pero como tengo que hacer para que cuando hago clic en mostrar bloque x , me muestre el contenido de esa capa (o bloque) y tambien me muestre ocultar bloque x y ademas que no se vea mostrar bloque x.

Este es el código con las modificaciones que me dijiste, capaz que me equivoque en algo...

Código HTML:
<html>
<head>
<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById(ver_off).style.display=VISIBLE;
  document.getElementById(ver_on).style.display=OCULTO;
}
 
function ocultar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById(ver_off).style.display=OCULTO;
  document.getElementById(ver_on).style.display=VISIBLE;
}
</script>

</head>
<body>

<body>

<div id="ver_on1"><a href="#" onclick="mostrar('bloque1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar('bloque1'); return false">Ocultar bloque1</a></div>

<div id="bloque1" style="display: none">
<p>Contenido bloque1</p>
</div>




<div id="ver_on2"><a href="#" onclick="mostrar('bloque2'); return false">Mostrar bloque2</a></div>

<div id="ver_off2" style="display: none"><a href="#" onclick="ocultar('bloque2'); return false">Ocultar bloque2</a></div>

<div id="bloque2" style="display: none">
<p>Contenido bloque2</p>
</div>






<div id="ver_on3"><a href="#" onclick="mostrar('bloque3'); return false">Mostrar bloque3</a></div>

<div id="ver_off3" style="display: none"><a href="#" onclick="ocultar('bloque3'); return false">Ocultar bloque3</a></div>

<div id="bloque3" style="display: none">
<p>Contenido bloque3</p>
</div>




</body>
</html>
En este link http://www.tufotolog.webniverso.com/147_1.php podes ver el codigo de arriba.

Gracias
  #4 (permalink)  
Antiguo 25/07/2007, 01:01
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 20 años
Puntos: 9
Re: Mostrar/ocultar capas
A ver, te explico un poco lo que hace cada cosa:
  • document.getElementById(blo) Localiza un elemento por su ID (en este caso cuyo ID sea igual a blo), podría ser tu capa <div id="ver_on1"> o la capa <div id="bloque1" style="display: none">
  • document.getElementById(blo).style.display=VISIBLE u OCULTO; hace que cada cosa localizada por su id (en este caso una capa) se haga visible o invisible

En tu caso, al pulsar en "Mostrar bloque1" quieres que se muestre la capa <div id="bloque1"> con su contenido, y al mismo tiempo quieres que desaparezca el texto
"Mostrar bloque1" (que tiene id "ver_on1") y aparezca el texto "Ocultar bloque1" (que tiene id "ver_off1")

Entonces, en las llamadas tienes que poner:

Código: 
<div id="ver_on1"><a href="#" onclick="mostrar('bloque1', 'ver_off1', 'ver_on1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar('bloque1', 'ver_off1', 'ver_on1'); return false">Ocultar bloque1</a></div>
De todas formas me parece un poco enrevesado...
PD: No he probado el codigo, asi que igual he puesto on donde era off o me he liado, espero que te apañes
  #5 (permalink)  
Antiguo 25/07/2007, 01:10
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 20 años
Puntos: 9
Re: Mostrar/ocultar capas
Te pongo un código que yo creo q es más sencillo, no se si te voy a liar mas, pero si solo quieres mostrar u oclutar párrafos no es necesario que crees una capa para cada cosa, yo tengo esta función que muestra u oculta párrafos y cambia el texto de ayuda del enlace (tooltip) por mostrar u ocultar:

Código: 
function MostrarOcultar(parr)
{
	var np = 'p' + parr; /*numero de parrafo*/
	var na = 'a' + parr; /*numero de enlace*/

	var elem = document.getElementById(np);
	var enlace = document.getElementById(na);

	if (elem.style.display=='block')
	{
		/*si esta visible lo oculta y cambia el texto del enlace*/
		elem.style.display = 'none';
		enlace.title = 'Ampliar información';
	}
	else
	{
		/*si esta oculto lo muestra y cambia el texto del enlace*/
		elem.style.display = 'block';
		enlace.title = 'Ocultar información';
	}
	return;
}
Despues, en cada parrafo pones una numeracion consecutiva, con id = a1, a2, a3... para los links de títulos y con p1, p2, p3... para los párrafos de contenido:

Código: 
		<p>
		<a href="#" title="Ampliar informaci&oacute;n" id="a1" OnClick="MostrarOcultar('1'); return false">
		Titulo del parrafo 1
		</a>
		</p>
		<p class="TextoParrafoOculto" id="p1">
                bla bla bla
		<br /><br />
                bla bla bla
		</p>

		<p>
		<a href="#" title="Ampliar informaci&oacute;n" id="a2" OnClick="MostrarOcultar('2'); return false">
		Titulo del parrafo 2
		</a>
		</p>
		<p class="TextoParrafoOculto" id="p2">
                bla bla bla
		<br /><br />
                bla bla bla
		</p>
Aqui tienes un ejemplo de funcionamiento, al hacer clic sobre el titulo se muestra u oculta el parrafo: http://www.foromovilidadsostenible.org/m30/quieres.htm
  #6 (permalink)  
Antiguo 27/07/2007, 16:24
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 18 años
Puntos: 36
Re: Mostrar/ocultar capas
Gracias PosProdukcion el código me funciono perfecto!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:09.