Foros del Web » Creando para Internet » HTML »

Problema con capas

Estas en el tema de Problema con capas en el foro de HTML en Foros del Web. Hola a todos, soy novato en html y necesito a traves de un boton hacer aparecer y desaparecer capas, lo he intentado asi pero no ...
  #1 (permalink)  
Antiguo 15/04/2010, 03:16
 
Fecha de Ingreso: abril-2010
Mensajes: 3
Antigüedad: 14 años, 7 meses
Puntos: 0
Pregunta Problema con capas

Hola a todos, soy novato en html y necesito a traves de un boton hacer aparecer y desaparecer capas, lo he intentado asi pero no funciona, solo oculta, donde veis el error?

<html>
<head>
<script LANGUAGE="javascript">

function decide(){
op=document.getElementById('capa1').getAttribute(' visibility');
if (op=="hidden"){muestra();}
else {oculta();}
}

function oculta(){
document.getElementById('capa1').style.visibility= "hidden";
}
function muestra(){
document.getElementById('capa1').style.visibility= "visible";
}
</script>

<title>Mostrar/ocultar capas con Javascript</title></head>
<body>
<div id="capa1" style="position:relative;">
</div>
<a href="#" onclick="decide()">logo</a>
</body>
</html>

saludos
  #2 (permalink)  
Antiguo 15/04/2010, 04:27
 
Fecha de Ingreso: abril-2010
Mensajes: 3
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Problema con capas

Buscando por el foro he cambiado el script hasta quedar asi:

<script LANGUAGE="javascript">

var
capa=document.getElementById("capa1");

function decide(){
if (capa.style.visibility == "hidden"){
capa.style.visibility = "visible" ;
}else{
capa.style.visibility = "hidden";
}
}

</script>

Pero ni asi me funciona.... alguna idea?
  #3 (permalink)  
Antiguo 15/04/2010, 11:27
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Prueba con lo siguiente:

Código para mostrarcapa.js

Código:
/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="none"){
		document.getElementById(layer).style.display="block";
	} else { 
		document.getElementById(layer).style.display="none";
		}
}

Código para mostrarcapas.html


Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="mostrarcapa.js"></script>
</head>

<body>
<div id="capauno">Ferra99</div>
<a href="#" onclick="javascript:mostrarcapa('capauno')">Mostrar-Ocultar</a>
</body>
</html>
El ejemplo funcionando lo puedes ver en http://foros.emprear.com/mostrarcapas/mostrarcapas.html

Saludos
  #4 (permalink)  
Antiguo 16/04/2010, 07:39
 
Fecha de Ingreso: abril-2010
Mensajes: 3
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Problema con capas

Muchas gracias emprear, llego a funcionar, ahora viene donde esta el mayor trabajo, ya que habra 6 botones y cada uno enseñara una capa y escondera las otras 5, lo he hecho todo asi:
Código:
function mostrarcapa(layer){
	var nom=document.getElementById(layer).getAttribute(Id);
	if(nom=="argenta"){
		document.getElementById("argenta").style.display="none";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";
		}
	if(nom=="nanet"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="none";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";
		}
	if(nom=="jai"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="none";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="cuseta"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="none";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="moro"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="none";
		document.getElementById("elena").style.display="block";		
		}
	if(nom=="elena"){
		document.getElementById("argenta").style.display="block";
		document.getElementById("nanet").style.display="block";
		document.getElementById("jai").style.display="block";
		document.getElementById("cuseta").style.display="block";
		document.getElementById("moro").style.display="block";
		document.getElementById("elena").style.display="none";		
		}
}

y el html es:
Código:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="capes.js"></script>
</head>

<body>
<a href="#" onclick="javascript:capes('nanet')">Mostrar-Ocultar</a>
<div id="nanet">Colocar aquí el contenido para  id "nanet"</div>
<a href="#" onclick="javascript:capes('jai')">Mostrar-Ocultar</a>
<div id="jai">Colocar aquí el contenido para  id "jai"</div>
<a href="#" onclick="javascript:capes('cuseta')">Mostrar-Ocultar</a>
<div id="cuseta">Colocar aquí el contenido para  id "cuseta"</div>
<a href="#" onclick="javascript:capes('moro')">Mostrar-Ocultar</a>
<div id="moro">Colocar aquí el contenido para  id "moro"</div>
<a href="#" onclick="javascript:capes('elena')">Mostrar-Ocultar</a>
<div id="elena">Colocar aquí el contenido para  id "elena"</div>
<a href="#" onclick="javascript:capes('argenta')">Mostrar-Ocultar</a>
<div id="argenta">Colocar aquí el contenido para  id "argenta"</div>
</body>

</html>
Pero no funciona... veis el problema?
hay alguna forma de ejecutar el script linea a linea para ver donde esta el error?

Gracias por vuestra paciencia!
  #5 (permalink)  
Antiguo 16/04/2010, 13:02
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Ferra:
Por que no empezaste por esto....
Mira, yo desarrollo Webs de manera integral, manejo bastante bien el php y algo de javascript, pero a la hora de buscar soluciones, voy a lo práctico, y en tu caso, para hacer lo que quieres nada mejor que el Dreamweaver (Desde el Ultradev4 hasta el CS4, tienen te permiten realizar esto, y en tan solo 5 minutos), te dejo una demo, mirá el código fuente y analizalo. Si no tienes DreamWeaver, puedes hacerlo manualmente de manera sencilla, y de paso es una buena forma de aprender. El JavaScript (que como verás es minimo) no necesitas modificarlo. sólo los parámetros del evento onclick en los botones, si agregas más, yo tan solo puse tres, utiliza hide/show segun lo necesites, y por supuesto, cambia a tu gusto los valores de los id para las capas.

http://foros.emprear.com/mostrarcapas/varias-capas.html

Un abrazo
  #6 (permalink)  
Antiguo 12/05/2010, 14:19
 
Fecha de Ingreso: mayo-2010
Mensajes: 2
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Problema con capas

Hola esta bien el ejemplo, mi nombre es eduard yo quisiera por favor me ayuden yo quiero trabajar algo presido pero no quiero usar botones quiero usar link por ejemplo uso el link
inicio y me muestre una capa inicio
nosotros me oculta las capas activas y me mustre la capa nosotros
agradeceré mucho su ayuda
  #7 (permalink)  
Antiguo 13/05/2010, 09:59
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Si usas links en lugar de botones la cosa no cambia mucho, solo debes utilizar el evento onclick en los links, en el primer ejemplo que pase en el post jusatamente utilizo un link en lugar de botones,
http://foros.emprear.com/mostrarcapas/mostrarcapas.html

Saludos
  #8 (permalink)  
Antiguo 08/06/2010, 09:52
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 14 años, 6 meses
Puntos: 0
Busqueda Respuesta: Problema con capas

Hola, alguien me puede ayudar porfis, kisiera k alguien me dijiera comomostrar y ocultamiento de capas, algo parecido al ejmplo de los botones. Tengo un submenu con 5 link, y kiero que cuando se cargue la pagina se muestre por default la primera capa, y k cuando de click en el 2do link se oculte la primera capa y me muestre la siguiente, y haci para los demas link. Y k cuando de click en el primer link vuelva aparecer la 1ra capa. Si me explico, aki te pongo mi submenu, ojala puedan ayudarme, cual es la funcion para esto y si hay k cambiar en los link o agregarles alguna funcion. Les agradecere su ayuda, por fas. No se mucho sobre esto.

<div id="submenu">

<ul>
<li><a href=>Acerca </a> </li>
<li><a href=>¿Quiénes Sómos? </a> </li>
<li><a href=>Mision </a> </li>
<li><a href=>Valores </a> </li>
<li><a hrer=>Objetivo Social </a> </li>
</ul>
</div>
  #9 (permalink)  
Antiguo 08/06/2010, 19:25
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Anita:
Es hora de que empieces a aprender, la solución a lo que deseas esta ahi mismo, en el post de los botones, te doy una pista, en el CSS (los estilos)
visibility: hidden, significa que el valor por defecto para la capa es Oculta, en tanto que visibility: visible que la muestra, en tanto que en el javascript, hide es oculatr y show mostrar, analiza el código fuente y un poco de lógica.
y no es como para llorar
  #10 (permalink)  
Antiguo 16/06/2010, 09:39
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 14 años, 6 meses
Puntos: 0
Mensaje Respuesta: Problema con capas

Gracias por la ayuda, me sirvio de mucho pues ya me sale. Saludos y en verdad muchisimas gracias
  #11 (permalink)  
Antiguo 26/10/2010, 09:28
 
Fecha de Ingreso: octubre-2010
Mensajes: 33
Antigüedad: 14 años, 2 meses
Puntos: 1
Pregunta Respuesta: Problema con capas

Tengo una duda.

Estaba revisando su código y tengo una pregunta:

Código:
/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="block"){
		document.getElementById(layer).style.display="none";
	} else { 
		document.getElementById(layer).style.display="block";
		}
}

Estaba intentando que al abrir la página lo que va entro de la "miCapa" vaya invisible y al dar click se vuelva visible, es decir, lo contrario a lo que ustedes tienen, pero al poner el código así, lo que hace es que al dar click la primera vez me envía a otro enlace de página, luego se sigue mostrando abierto y al dar click nuevamente ya me funciona bien.

Por lo que entiendo en la etiqueta mensiona que si la capa está invisible al dar click debe mostrarse, y si no, debe oculatarse, pero no logro que me funcione.

¿Alguién por favor podría ascesorarme un poco?

De antemano, gracias.
  #12 (permalink)  
Antiguo 26/10/2010, 10:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Problema con capas

muy posiblemente el display:none; inicial de tu div lo declaraste en una hoja de estilos, esta propiedad debes declararla en el mismo html
Código HTML:
Ver original
  1. <div id="capa1" style="display:none;"></div>
  #13 (permalink)  
Antiguo 26/10/2010, 10:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

rirs:

Te explico, la script, invierte el valor de la propiedad css establecida (en este caso "display")

Si está en "block" la pasa a "none" y a la inversa, el estado inicial de la capa, tenés que definirlo con el atributo "style" en cada una de las capas.

además, te aclaro que la script sufrió una modificación,

Te dejo un ejemplo funcional en
http://foros.emprear.com/mostrarcapa...tar_capas.html
notá que la capa 4 aparece por defecto visible.

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #14 (permalink)  
Antiguo 26/10/2010, 10:48
 
Fecha de Ingreso: octubre-2010
Mensajes: 33
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Problema con capas

Cita:
Iniciado por Ag666 Ver Mensaje
muy posiblemente el display:none; inicial de tu div lo declaraste en una hoja de estilos, esta propiedad debes declararla en el mismo html
Código HTML:
Ver original
  1. <div id="capa1" style="display:none;"></div>
Buenos días Ag666, primeramente gracias por responder.

Verás, estaba revisando pero no encuentro que tenga ninguna hoja de estilos, de hecho lo he realizado igual que arriba, tengo en mi html:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mostrar - Ocultar Capas</title>
<script type="text/javascript" src="mostrarcapa.js"></script>
</head>

<body>
<div id="capauno">Ferra99</div>
<a href="#" onclick="javascript:mostrarcapa('capauno')">Mostrar-Ocultar</a>
</body>
</html> 
Mientras que en mi hora de .js:

Código:
/* ---------------------------- */
/* MostrarOcultar Capas			*/
/* ---------------------------- */
function mostrarcapa(layer){
	var miCapa=document.getElementById(layer).style.display;
	if(miCapa=="block"){
		document.getElementById(layer).style.display="none";
	} else { 
		document.getElementById(layer).style.display="block";
		}
}

Soy nueva para el Js, en mi vida lo había tocado, pero por lo que entiendo al leer el código es lo que mencionaba. He leído varias veces el html para ver si ahí encontraba alguna propiedad que me indicara o diera referencia a que la ventana aparezca cerrada, pero francamente no la encontré. ¿Hay alguna manera de que las propiedades de la hoja de estilo estén ocultas?

Agradezco mucho tu ayuda.
  #15 (permalink)  
Antiguo 26/10/2010, 10:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

rirs:

fijate en

http://www.forosdelweb.com/f4/proble...2/#post3611900

que he hecho algunas correcciones a la script, y ademas ahora el javascript está en el mismo html, no en un archivo externo, para que puedas visualizarlo, el css en el <style> es sólo para la estética, la propiedad display, te repito, debe estar definida inline a través del atributo style de cada div

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #16 (permalink)  
Antiguo 26/10/2010, 11:05
 
Fecha de Ingreso: octubre-2010
Mensajes: 33
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Problema con capas

Muchas gracias Emprear!

Sep, no lo había visto el post, pero ya me he puesto a revisarlo y tratar de entenderlo mejor, para así aprenderme el por qué funciona de dicha manera.

Tengo una pregunta, hablando de estética:

en la propiedad de:
<td><a onclick="cambia('capauno')">Mostrar-Ocultar Capa Uno</a>

la original es:
<td><p onclick="cambia('capauno')">Mostrar-Ocultar Capa Uno</p>

Pero con ella me da un espacio de interlineado a dos renglones cuando sólo desearía uno. Con la a, me maneja uno pero no me coloca la manita sino que me deja el puntero con texto seleccionable.

Pregunta entonces ¿de qué manera podría hacer que me respete mi manira sin necesidad de pasar tanto espacio en interlineado?

Gracias de verdad!
  #17 (permalink)  
Antiguo 26/10/2010, 11:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

bueno, en mi ejemplo no estoy usando una tabla, uso un elemento "clickeable" para hacer el cambio, y el div que contiene el texto a mostrar-ocultar

<p onclick="mostrarOcultar('capauno')">Mostrar-Ocultar Capa Uno</p>
<div id="capauno" style="display:none;">Contenido Capa Uno</div>


Ademas le doy un padding: 5px; a los dos elementos como para que no se amontone todo.
Habría que ver el conjunto de tu html

saludos


PD: un detalle, a la funcion cambia(), ahora la renombré como mostrarOcultar();
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #18 (permalink)  
Antiguo 26/10/2010, 11:28
 
Fecha de Ingreso: octubre-2010
Mensajes: 33
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Problema con capas

Alo Emprear.

Veamos, ya cambié la propiedad que me has indicado, ahora... el cómo la estoy estrucurando, bueno, intentaba con celdas ya que me interesa meterlas para una tabla, te pego lo que he movido según yo para que no pase tanto espacio:

En el style ha sido lo siguiente:
Código:
<style type="text/css">
#capauno, #capados {
width: 350px;
border:
background-color:
padding: 0px;
}


p {
cursor: pointer;
padding: 0px
background-color:
width: 350px; 
}
</style>
Mientras que para el cuerpo del html:
Código HTML:
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a onclick="mostrarOcultar('capauno')">Mostrar-Ocultar Capa Uno</a>
<div id="capauno" style="display:none;">Contenido Capa Uno</div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<p onclick="mostrarOcultar('capados')">&nbsp;</p>
<p onclick="mostrarOcultar('capados')">Mostrar-Ocultar Capa Dos</p>
<div id="capados" style="display:none;">Contenido Capa Dos</div>



</body> 
Como podrás darte cuenta en la capa uno coloco lo que te decía, la "a" en lugar de "p" porque me no me deja espacio entre nada, pero no me pone la manita, como lo hace en la capa dos que está tal cual la has subido.

Gracias, disculpa tanta molestía, es que llevo peleando semanas con las capas y apenas hoy me topado con lo más parecido a lo que buscaba.
  #19 (permalink)  
Antiguo 26/10/2010, 11:45
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

El css para poner la "manito", es

cursor: pointer;

normalmente un <a href=""> lo genera por si solo pero un <a onclick=""> no.

en mi css el cursor: pointer; se lo aplpique a <p>, tendrías que aplicarselo a <a> o bien llamar el Javascript como sui fuera un link, de la siguiente forma
<a href="javascript:mostrarOcultar('capauno')">mostra r Ocultar</a>, con lo cual te crearía la manito sin necesidad de aplicarla con css. Si querés quitarle el subrayado al link, usas en el css
a{
text-decoration: none;
}


Se entiende
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #20 (permalink)  
Antiguo 26/10/2010, 11:53
 
Fecha de Ingreso: octubre-2010
Mensajes: 33
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Problema con capas

Oh... Creo que me siento más culta que hace cinco minutos, no sabía que se podía hacer eso. Y sep, ya me ha funcionado el cursor como debe ¡te lo agradezco mucho! Ahora veré meterle tablas y... si llego a tener nuevamente dudas espero que no te moleste si vuelvo a buscar ascesoria contigo.

Gracias nuevamente!!
  #21 (permalink)  
Antiguo 26/10/2010, 11:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Para eso estamos colega

ah, hace rato que no trabajaba con esa script, le estoy poniendo unas mejoras, cuando terrmine te la paso

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #22 (permalink)  
Antiguo 26/10/2010, 13:49
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Problema con capas

Agregado a la script
Ahora se puede modificar el texto visible según el estado de la capa


http://foros.emprear.com/mostrarcapa...as-ctexto.html



saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: capas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:38.