Mostrar capas

Javiglez · #1 (**permalink**) 27/10/2007, 08:44

hola estoy intentando mostrar una capa cuando pinchas en otra..lo tengo hecho para otras webs pero en esta no me va y es el mismo código a ver si alguien me puede ayudar. Os adjunto el código esta con una simple función javascript y con el evento onclick.

Código:

<div id="titulo_texto" onclick="mostrar ('textos')">

textos es la capa que quiero mostrar cuando pinchas en la otra capa titulo_texto

y la función javascript mostrar es esta

Código:

function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
}

Gracias

JavierB · #2 (**permalink**) 27/10/2007, 08:55

Hola Javiglez

He probado tu código y funciona bien. ¿Te da algún error? ¿Lo tienes en alguna página donde podamos verlo?

Saludos,

Javiglez · #3 (**permalink**) 27/10/2007, 09:09

esque es de una parte privada de clientes y no podeis tener acceso..no me da ningún fallo de javascript nu se es muy raro....Las capas estan bien nombradas...tiene que ser una tontería....

JavierB · #4 (**permalink**) 27/10/2007, 09:17

Hola de nuevo.

Sí que es raro

¿Te funciona este código?

Código PHP:

  <html>
<head>
<script type="text/javascript">
function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
}
</script>
</head>
<body>
<div id="titulo_texto" onclick="mostrar ('textos')">Ver</div>
<div id="textos" style="visibility:hidden">Oculto</div>
</body>
</html>

Saludos,

tunait · #5 (**permalink**) 27/10/2007, 09:18

Tema movido a javascript

Javiglez · #6 (**permalink**) 27/10/2007, 09:48

Cita:

Iniciado por JavierB

Hola de nuevo.

Sí que es raro

¿Te funciona este código?

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function mostrar(nombreCapa){  
document.getElementById(nombreCapa).style.visibility="visible";  
} 
</script> 
</head> 
<body> 
<div id="titulo_texto" onclick="mostrar ('textos')">Ver</div> 
<div id="textos" style="visibility:hidden">Oculto</div> 
</body> 
</html>

Saludos,

No, esto es lo mismo que lo mio solo que yo la función javascript la tengo en un js fuera....

Javiglez · #7 (**permalink**) 27/10/2007, 10:10

Ah perdona he puesto los enlaces y si que va.... lo tengo con 3 capas diferentes que pinchas y se ve distinas capas en la misma posicion no se si tendrá algo que ver eso que las 3 capas seán iguales las que se muestran y estan en el mismo sitio colocadas pero con distinto contendido....

Javiglez · #8 (**permalink**) 27/10/2007, 10:22

bUENO yo veo que así como pongo yo no se puede hacer lo que quiero. Voy a explicar lo que quiero para que me echeis una mano..Una pantalla con 3 enlaces a la izquierda uno debajo del otro..a la derecha de los enlaces una capa en la que se muestra el contenido de cualquiera de los 3 enlaces...entonces lo que se me ocurrio fue lo antes nombrado..tener una capa para cada enlace e ir superponiendose ya que estan las 3 en el mismo sitio colocadas, según el enlace que pinche...Pero toy pensando en hacerlo en una sola pero no me sale..

JavierB · #9 (**permalink**) 27/10/2007, 10:29

Veamos si vamos avanzando:

Código PHP:

  <html>
<head>
<script type="text/javascript">
var visto = null;
function verCapa(iden) {
  obj = document.getElementById(iden);
  if (obj==visto) return false;
  if (visto!=null)
    visto.style.display = 'none';
  obj.style.display = 'block';
  visto=obj;
}
</script>
</head>
<body>
<a href="#" onclick="verCapa('uno')">Capa 1</a>
<a href="#" onclick="verCapa('dos')">Capa 2</a>
<a href="#" onclick="verCapa('tres')">Capa 3</a>
<div id="uno" style="display:none">Div número 1</div>
<div id="dos" style="display:none">Div número 2</div>
<div id="tres" style="display:none">Div número 3</div>
</body>
</html>

Saludos,

Daam · #10 (**permalink**) 27/10/2007, 10:45

Gracias por tu respuesta JavierB, también me ha servido un poco en mi problema. Pero ¿de qué manera hago para que al seleccionar un determinado valor de un select (del 1 al 12) se muestre N veces una capa determinada? Tengo un post abierto:

http://www.forosdelweb.com/f13/como-...0/#post2169315

Javiglez · #11 (**permalink**) 27/10/2007, 11:35

Cita:

Iniciado por JavierB

Veamos si vamos avanzando:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
var visto = null; 
function verCapa(iden) { 
  obj = document.getElementById(iden); 
  if (obj==visto) return false; 
  if (visto!=null) 
    visto.style.display = 'none'; 
  obj.style.display = 'block'; 
  visto=obj; 
} 
</script> 
</head> 
<body> 
<a href="#" onclick="verCapa('uno')">Capa 1</a> 
<a href="#" onclick="verCapa('dos')">Capa 2</a> 
<a href="#" onclick="verCapa('tres')">Capa 3</a> 
<div id="uno" style="display:none">Div número 1</div> 
<div id="dos" style="display:none">Div número 2</div> 
<div id="tres" style="display:none">Div número 3</div> 
</body> 
</html>

Saludos,

Gracias Javierb por la atención pero con tu metodo de ver capa me da un error de Javascript de que se esperaba un objeto...joe como una tontería se complica leeches

caricatos · #12 (**permalink**) 27/10/2007, 11:52

Hola:

Tal vez la respuesta de este mensaje pueda servir: Mostras/Ocultar Capas

Saludos

Javiglez · #13 (**permalink**) 28/10/2007, 05:28

Sigo a vueltas con esto de mostrar las capas, gracias caricatos pero ese ejemplo no me vale porque yo lo quiero con 3 capas...Yo creo que lo que esta mal es la función mostrar porque no me funciona con ningun evento...lo tengo así ahora mismo..

Código HTML:

<div id="titulo_texto" onclick="mostrar('planos') onmouseover"mostrar('planos')">

planos es la capa que quiero mostrar y la función mostrar

Código:


function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
}

y el caso es que si que me funciona en otro script !! a ver si veis algo anormal, o esque no se puede meter donde se define la capa los eventos onmouseclick onmouseover...he probado con todo.

caricatos · #14 (**permalink**) 28/10/2007, 07:52

Cita:

Iniciado por Javiglez

Sigo a vueltas con esto de mostrar las capas, gracias caricatos pero ese ejemplo no me vale porque yo lo quiero con 3 capas...

¡Je, je! justamente el ejemplo está con 3 capas

Saludos

Daam · #15 (**permalink**) 28/10/2007, 10:33

Una pregunta ¿De qué manera hago para mostrar N cantidad de veces una determinada capa con el evento onchange de un select?

Javiglez · #16 (**permalink**) 28/10/2007, 15:21

Caricatos estoy intentanto implementar tu función..
var capas = ["fotos", "planos", "textos"];

function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
tengo puesto esto pero me da fallo de javascript, estaría bien asi que es como lo tengo puesto? esque creo que (capa) no lo tienes definido.....o esque esto no funciona cuando las 3 capas están una encima de otra? esque las 3 capas tienen la misma medida y están en el mismo sitio posicionada y dependiendo de donde pinches quiero que muestre una u otra....

Javiglez · #17 (**permalink**) 28/10/2007, 16:03

Estoy probando con la función ocultar que es lo misma que la de mostrar pero con hidden y poniendolo así pero me da error
onclick="ocultar ('fotos') ocultar ('planos') mostrar('textos')">
Pero debe estar mal puesto porque da error de sintaxis alguien sabe como se pone? quiza separado por ; y entre comillas cada uno?
Gracias

Javiglez · #18 (**permalink**) 28/10/2007, 16:33

Bueno ya lo he conseguido ha sido finalmente asi...
onclick="ocultar ('fotos'); ocultar ('planos'); mostrar('textos')">
Primero oculta dos de ellas y muestro la que corresponde.
Saludos.

caricatos · #19 (**permalink**) 29/10/2007, 01:59

Hola:

Un ejemplo completo y funcionando:

Código:

<html>
<head>
<style>
div {display: none;}
span {cursor: pointer;}
#roja {background-color: red;}
#verde {background-color: green;}
#azul {background-color: blue;}
</style>
<script>
var capas = ["roja", "verde", "azul"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>
</head>
<body>
Mostramos capa: 
<span onclick="mostrar('roja')" >roja</span>
<span onclick="mostrar('verde')" >verde</span>
<span onclick="mostrar('azul')" >azul</span>
<div id="roja">roja</div>
<div id="verde">verde</div>
<div id="azul">azul</div>
</body>
</html>

Puedes probarlo pegando el código en esta página: Probador de scripts

Saludos

Javiglez · #20 (**permalink**) 29/10/2007, 02:57

Muchas gracias caricatos muy buena la web para probar los scripts, y el script que has puesto no obstante ya lo conseguí con el mío, si alguien tiene interés esta noche posteo el mio, es más cortito. Saludos y gracias a todos.

caricatos · #21 (**permalink**) 29/10/2007, 03:30

Cita:

Iniciado por Javiglez

...si alguien tiene interés esta noche posteo el mio, es más cortito....

¡Je, je! yo mismo tengo interés en ver tu solución más cortita

Tal vez en vez de más corta, se me ocurre una solución más eficiente, simplemente guardando la capa visible en una variable, y 3 asignaciones directas...

Código:

var capaActual = "roja";
function mostrar(capa) {
 document.getElementById(capaActual).style.display = "none";
 document.getElementById(capaActual = capa).style.display = "block";
}

Saludos

hscnet · #22 (**permalink**) 25/01/2008, 06:39

Muy bueno el ejemplo. Yo tengo un problema similar pero más complicado aún.

Tengo lo mismo pero no con tres capas sino con cuarenta y además en cada capa hay una X para poder cerrarla y así mostrar de nuevo la página sin ninguna capa visible.

A ver si sois capaces. Gracias.

hscnet · #23 (**permalink**) 25/01/2008, 07:02

Más sencillo aún. Con que me digáis como ocultar las capas una vez visible me basta.

Gracias

caricatos · #24 (**permalink**) 30/01/2008, 02:58

Hola hscnet:

Explica mejor tu caso, porque si solo tiene que haber una capa visible, y poderla cerrar, para cerrarla (ocultarla) debes poner su estilo display con valor "none", o visibility= "hidden" (esta última reserva espacio, pero si son capas flotantes tal vez no importe)

Al cerrar la capa, se puede poner la variable capaActual = null;

Y para mostrar nuevas capas consultar ese valor... pero me imagino que debe ser un caso algo más complejo.

Saludos

aleck2008 · #25 (**permalink**) 06/03/2008, 06:54

Hola.
Vi este código en el foro, me interesó, lo copié (ha sido una de las cosas que me ha animado a darme de alta como usuario del foro), y amí me funciona. Pero sobre este código o sin modificarlo mucho quisira que la capa roja, por ejemplo, estuviera visible por defecto al cargar la página.

El código que ví y que funciona:
<html>
<head>
<style>
div {display: none;}
span {cursor: pointer;}
#roja {background-color: red;}
#verde {background-color: green;}
#azul {background-color: blue;}
</style>
<script>
var capas = ["roja", "verde", "azul"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>
</head>
<body>
Mostramos capa:
<span onclick="mostrar('roja')" >roja</span>
<span onclick="mostrar('verde')" >verde</span>
<span onclick="mostrar('azul')" >azul</span>
<div id="roja">roja</div>
<div id="verde">verde</div>
<div id="azul">azul</div>
</body>
</html>

¿Como hago para mostrar la capa roja activada por defecto?, Muchas gracias de antemano. Me explico: Lo que realmente quisiera sería una navegación por tabs o pestañas mediante capas mostrando una por defecto.

JavierB · #26 (**permalink**) 06/03/2008, 09:53

Hola aleck2008

Cambia esta línea:

Código:

#roja {background-color: red; display:block}

Saludos,

aleck2008 · #27 (**permalink**) 06/03/2008, 13:41

Muchas gracias, lo probé y funcionó correctamente.

Es bueno saber que hay sitios como este.

Un saludo y volveré por aquí.

Aleck

aleck2008 · #28 (**permalink**) 07/03/2008, 07:23

Buenos dias, a todos otra vez.

OTRA DUDA!!!

Al responderme a la anterior pregunta y siguiendo con mi pequeña aplicación web, ahora me surge otra duda.
Esta vez la pregunta o el tema es el siguiente:
Tengo un formulario donde un usuario pueda introducir texto en una caja de texto (una queja o un comentario) y lo quisiera es que el usuario cuando haga clic en el botón "enviar" este formulario se mande directamente a una direccion de correo electrónico (pero no desde su correo electronico) con el nombre de usuario el asunto y lógicamente el texto del mensaje.

Agradecería cualquier tipo de ayuda: alguna url de referencia, algún trozo de código(preferible), o algún sitio donde pueda conseguir un código parecido.

Muchas gracias, como siempre de antemano.
De verdad haceis un gran trabajo.

fenix0224 · #29 (**permalink**) 08/03/2009, 11:16

pues aleck con javascript creo que no se puede hacer esto es mas una pregunta de php mira un codigo bastante simple para enviar correos esta en http://www.desarrolloweb.com/articulos/1048.php el problema es que generalmenbte estos correos llegan a la bandeja de no deseados y casi nunca llegan a hotmail por eso mejor usar una cuenta gmail pa recibir estos correos, si quieres conoces algo de php y tienes un host de pago puedes configurar los sockets para enviar correos u otra alternativa seria usar la clase phpmailer : http://blog.unijimpe.net/introduccion-a-phpmailer/

caricatos · #30 (**permalink**) 08/03/2009, 16:36

Hola:

El tema lleva 1 año inactivo.

Saludos