Cambiar Capas con un solo click y desde un solo boton

elmartin7 · #1 (**permalink**) 21/04/2009, 07:17

-Bueno aver si alguno me podeis ayudar por que estoi superatascado....
llevo dos horas intentando cambiar 2 capas cada vez que haga click.

Osea Capa1 (la que contiene documentacion) capa2(la que utilizo de hidden)

el script que me emontado es el siguiente:

--------

function activacapa(){
if (document.getElementById(capa2).style.display=visi ble;){
document.getElementById(capa).style.display=hidden ;}
else document.getElementById(capa).style.display=visibl e;
}
</script>

--------

La funcion se ejecuta pero no cambia las capas,los ID son logicamente capa y capa2, y simplemente quiero sobreponer una encima de la otra,lo hago con la intencion de que no aparezca ninguna capa al arrancar la pagina solo cuando activo la funcion.

Gracias de antemano

JavierB · #2 (**permalink**) 21/04/2009, 08:55

Hola elmartin7

Tienes algunos errores:

Código:

if (document.getElementById(capa2).style.display=='visible';){

Saludos,

elmartin7 · #3 (**permalink**) 21/04/2009, 09:29

Gracias,que despiste mas tonto, aun asi me sigue sin funcionar :s

Epuesto las dos capas,uan justo encima d la otra,la ultima que escrito en el codigo es CAPA2,asique mi capa1 es invisible.Y lo que quiero hacer con el script es activarla,pero no va.

Cita:

y asi estan las capas:

Cita:

<div border="2" id="capa1" name="capa1" class="capa1">
"Nombre de usuario"<br>
Telefono:<br>
Movil:<br>
Fax:<br>
Correo:</div>
<div border="2" id="capa2" name="capa2" class="capa2"></div>

Tambien probe poniendolas type y tampoco iba :s

elmartin7 · #4 (**permalink**) 21/04/2009, 09:48

aparte de como lo coloque,le puedo meter el style.display en la etiketa div para darselo mascado?

JavierB · #5 (**permalink**) 21/04/2009, 12:45

Hola de nuevo.

Estás confundiendo el operador de comparación (==) con el de asignación (=)

Código javascript:

Ver originalif (document.getElementById(capa1).style.display=='hidden';){
document.getElementById(capa1).style.display='visible';}
else document.getElementById(capa2).style.display='visible';

Lo de colocar style.display en la etiqueta div no lo he entendido.

Saludos,

alor86 · #6 (**permalink**) 21/04/2009, 14:51

Parece que estas manejando mal las propiedad display la estas confundiendo con la propiedad visibility el codigo te deberia quedar asi con la porpiedad display

if (document.getElementById(capa1).style.display=='no ne'){
document.getElementById(capa1).style.display='bloc k'}
else
document.getElementById(capa2).style.display='bloc k';

o en vez de usar display debes usar visibility y te quedaria asi

if (document.getElementById(capa1).style.visibility== 'hidden'){
document.getElementById(capa1).style.visibility='v isible';}
else
document.getElementById(capa2).style.visibility='v isible';

elmartin7 · #7 (**permalink**) 23/04/2009, 01:54

Gracias por las correciones,no e caido en lo de los simbolos == y = de hecho es que pensaba que estaba bien asi. Aun asi de ninguna de las dos formas lo consigo obtener. Los div los e metido fuera y dentro del php,e probado con display y con visibility y nada.

Os dejo un codigo que exo limpio para averiguar antes donde fallo:

Código:

<html>
<head><title>Prueba capa</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />  
<script>
function activacapa(){
if  (document.getElementById(capa1).style.visibility=='hidden'){
     document.getElementById(capa1).style.visibility='visible';}
else document.getElementById(capa2).style.visibility='hidden';
}

function activacapa2(){
if  (document.getElementById(capa1).style.display=='none';){
     document.getElementById(capa1).style.display='block';}
else document.getElementById(capa2).style.display='none';
}

function activacapa3(){
if  (document.getElementById(capa1).style.visibility=='hidden'){
     document.getElementById(capa1).style.visibility='visible';}
}

function activacapa4(){
if  (document.getElementById(capa1).style.display=='none';){
     document.getElementById(capa1).style.display='block';}
}

</script>
</head>
<body>

<div border="2" id="capa1" name="capa1" class="capa1">Capa1</div>
<div border="0" id="capa2" name="capa2" class="capa2">Capa2</div>

<input type="button" onclick="activacapa()" name="boton" value="boton">
<input type="button" onclick="activacapa2()" name="boton2" value="boton2">
<input type="button" onclick="activacapa3()" name="boton3" value="boton3">
<input type="button" onclick="activacapa4()" name="boton4" value="boton4">
</body>
</html>

y el del estilo.css

Código:

body {
	background-color:#00B2FF;
	text-align: center;
  }

.capa1{
  text-align:left;
  position:absolute;
  width:250px;  
  height:100px;
  left:430px;
  top:80px;
  background-color:white;
  BORDER: black 5px solid ;
} 
.capa2{
  text-align:left;
  position:absolute;
  width:250px;  
  height:100px;
  left:435px;
  top:85px;
  background-color:#00B2FF;
} 
.capa3{
  text-align:center;
  position:absolute;
  width:150px;  
  height:40px;
  left:485px;
  top:10px;
	background-color:white;
	BORDER: black 2px solid ;
}

el estilo lo e probado metiendo tambien visibility:hidden; y nada