alternar la visibilidad de las capas

amanda75 · #1 (**permalink**) 01/07/2004, 11:19

Estoy intentado hacer un menú con los botones diseñados con css, y con javascript quiero que cada uno muestre un <div> diferente .

He encontrado estas dos funciones

Cita:

Todo funciona bien si en el body lo pongo así:

Cita:

<div class="lateral">
<a href="javascript:mostrarcapa('capa1');">mostrar capa1</a> |
<a href="javascript:ocultarcapa('capa1');">ocultar capa1</a> |
<a href="javascript:mostrarcapa('capa2');">mostrar capa2</a> |
<a href="javascript:ocultarcapa('capa2');">ocultar capa2</a> |

</div>

Pero los botones están hechos para no utilizar enlaces y habría que ponerlo más o menos así:

Cita:

<div class="lateral">
<span class="boton" onclick="javascript:mostrarcapa('capa1');" onfocus="javascript:mostrarcapa('capa1');" onblur="javascript:ocultarcapa('capa1');">mostrar capa1</span>

<span class="boton" onclick="javascript:mostrarcapa('capa2');" onfocus="javascript:mostrarcapa('capa2');" onblur="javascript:ocultarcapa('capa2');">mostrar capa2</span>

</div>

Pero no lo consigo. Aparecen las capas bien, en su sitio, pero las dos juntas. y yo lo que quiero es que al darle al boton1 aparezca la capa1 y desaparezca la capa2, y al darle al botón2 aparezca la capa2 y desaparezca la capa1

¿sabeis cual es el error?

caricatos · #2 (**permalink**) 02/07/2004, 00:01

Hola amanda75:

Creo que te convendría usar los eventos onmouseover y onmouseout...

Usar onfocus/onblur creo que es más aconsejable para formularios...
Otra cosa que creo que sobra (usando onmouseover) es el onclick (aunque no conozco tus intenciones).
Por último, con netscape 6 se puede usar el estilo visibility tal como se usa en explorer (la forma estandar definida en w3.org)

Saludos

amanda75 · #3 (**permalink**) 02/07/2004, 13:27

Hola Caricatos :)

Gracias por responder, te cuento:

Estoy experimentando con los eventos, poca cosa, me encuentro en la fase de "a ver que pasa si quito esto..." y tratando de ampliar un poco mis nociones de css.

Leí un tutorial muy interesante sobre efectos con imagenes sin js, solo con css y al mismo tiempo me topé con la directiva "focus" de css. Y entonces me di cuenta que con ese sistema podía hacer mi web más rápida.

Como está hecha con solo html y cada página tiene un poco de texto, pensé...

¿ y si diseño los botones en css cómo en el tutorial (dando unas coordenadas a la imagen según los movimientos del ratón) y añado por mi parte una imagen para "focus"'? ...

De esa manera, podría agrupar en una sola página lo que ahora tengo en 10, bastaría poner 10 div, cada uno con su texto, y cada <div> se mostraría haciendo onclic sobre un botón diferente. Así no tendrían que cargarse continuamente las páginas.

Ahora lo tengo así

Como verás, los botones tienen un efecto con js y el onclic carga otra página html.

La idea va en esta dirección

El efecto está hecho con css, pero tenía que buscar una manera para alternar las capas.

Entonces recordé que en el ScriptMaster había visto "algo" parecido a lo que quería, y, efectivamente, era esto:

Cita:

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">



</script>

</head>

<body>


<SPAN ID="newlayer" style="position:absolute;">layer-text</SPAN>
<br><br><br>
<a href="javascript:hidelayer('newlayer');">hide layer</a> |
<a href="javascript:showlayer('newlayer');">show layer</a> |
<a href="javascript:writetolayer('newlayer','layer-text #1');">layer-text #1</a> |
<a href="javascript:writetolayer('newlayer','layer-text #2');">layer-text #2</a>

</body>
</html>

Funciona asi

Lo que yo quiero es precisamente lo que realiza la funcion writetolayer, el problema es que no puedo poner todo el texto entre las comillas simples

Cita:

<a href="javascript:writetolayer('newlayer','layer-text #1');">layer-text #1</a>

No quedaría elegante ... ¿o sí? ... además, me gustaría validar el código y me parece que esa manera de definir los enlaces ( =javascript:" ..) no pasa la validación del consorcio.

Intuyo que todo esto es muy básico, es muy probable que me esté haciendo yo solita la empanada total ... puede que se resuelva simplemente con css ... no sé ... yo creía que la solución era utilizar las dos primeras funciones ...

He llegado hasta aquí

pero lo que intento es quitar las opciones "ocultar capa1" y "ocultar capa2" y que esas acciones se realicen automáticamente desde los botones. Como verás tampoco consigo mantener el estilo de los textos.

Lamento mucho estar en esta etapa preescolar, gracias por la paciencia.

tunait · #4 (**permalink**) 03/07/2004, 03:32

Holas amanda

Bueno, llevas un poco de lío, pero es normal cuando se está en la fase "a ver qué pasa si le quito esto". También es normal confundir términos y cosas de esas.

Respecto a focus... me temo que no es lo mismo el focus que tiene css que el evento onfocus usado en javascript.

focus es una pseudoclase dinámica para css, como lo es también active y hover (a:hover, a:active, a:focus). Prentende ser el momento en el que el link tiene el foco, algo así como el active. Nunca he logrado que me reconozca el momento focus, no recuerdo por qué razón (en su día averigüé la razón pero nomacuerdo). Eso en principio sirve para los links, que son elementos que tienen esos distintos estados, pero no sirve para una capa.

el evento onfocus en cambio no sólo sirve para links, si no también para campos de formulario, ventanas.... pero tampoco se enteran las capas. Una capa se puede tocar (mouseover) dejar de tocar (mouseout) arrastrar (drag) y hacerle click (onlick) pero no toma focos.

Volviendo a la forma de que al mostrar una capa se oculten las otras.... te explico la forma en la que hago yo estas cosillas....

Yo la lío un poco más, pero es porque soy rara, te explico una forma relativamente simple pero que requiere de actualización si agregas alguna capa nueva.

Crea un array con todos los idés de las capas que pretendas mostrar y ocultar

var misCapitas = new Array('capita1','capita2','capita3')

luego crea una función que será la encargada de menear todo el sarao

function mostrar(cual){
for(m=0;m<misCapitas.length;m++){
document.getElementById(misCapitas[m]).style.visibility = 'hidden'
}
document.getElementById(cual).style.visibility = 'visible'
}

Y cuando llames a la función la pasas como argumento el id de la capa que quieras que se muestre.

<a href="#" onclick="mostrar('capita2');return false"> capita 2 </a>

Este onclick se lo puedes poner a una capa que simula un botón, sólo que puedes ahorrarte el return false del final.

La función lo que hace es poner antes que nada todas las capas en hidden, y cuando ha terminado, pone visible la que le has enviado como parámetro.

amanda75 · #5 (**permalink**) 03/07/2004, 12:02

Holasss

Tengo un pequeño problema: Se cargan todas las capas juntas .

Si las posiciono en absolute no se ve ná si las posiciono en relative queda un hueco en el lugar de la capa

Me páice que yo no llego a la fase de "a ver que pasa si añado esto .. "

tunait · #6 (**permalink**) 03/07/2004, 12:19

Prueba una cosa....

function mostrar(cual){
for(m=0;m<misCapitas.length;m++){
document.getElementById(misCapitas[m]).style.display= 'none'
}
document.getElementById(cual).style.display= 'inline'
}

Y a todas las capas la pones inicialmente con la propiedad css display: none

Eso hace que no se muestren ni ocupen un espacio en el flujo del documento. Entonces con la función cambiamos ese none por un inline, momento en el que toma su espacio y se muestra

prueba a ver y me cuentas

amanda75 · #7 (**permalink**) 03/07/2004, 12:57

Ná

Debe de ser algún problema con css. Me he debido de liar y puede que algo le esté dando dos patadas a otra cosa.

Veo que de lo que se trata es de combinar la visibilidad de js con css ... así que voy a combinar " a ver que pasa"

.Con un poco de paciencia creo que lo conseguiré. En cuanto encuentre la solución lo posteo.

Un beso tunait, te agradezco infinito la clase particular. ;)

tunait · #8 (**permalink**) 03/07/2004, 13:02

Te dejo este ejemplo a ver si al menos te sirve de orientación

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#capita1{
background-color: #0099CC;
display: none;
}
#capita2 {
background-color: #999966;
display: none;
}
#capita3 {
background-color: #CCCCFF;
display: none;
}
#capita4 {
background-color: #FFCC99;
display: none;
}
.pepe{
text-align: center;
}
</style>
<script language="JavaScript" type="text/javascript">
var misCapitas = new Array('capita1','capita2','capita3','capita4')
function mostrar(cual){
for(m=0;m<misCapitas.length;m++){
document.getElementById(misCapitas[m]).style.display= 'none'
}
document.getElementById(cual).style.display= 'inline'
}
</script>
</head>

<body>
<p class="pepe"><a href="#" onclick="mostrar('capita1');return false">capita 1</a> <a href="#" onclick="mostrar('capita2');return false">capita 2</a> <a href="#" onclick="mostrar('capita3');return false">capita 
  3</a> <a href="#" onclick="mostrar('capita4');return false">capita 4</a></p>
<div id="capita1"> Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1  Soy la capa 1 </div>
<div id="capita2"> Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2  Soy la capa 2 </div>
<div id="capita3"> Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3  Soy la capa 3 </div>
<div id="capita4"> Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4  Soy la capa 4 </div>
</body>
</html>

tunait · #9 (**permalink**) 03/07/2004, 13:27

He estado trasteando con tu código y así funciona bien, mira, pon los estilos de las capas así

#capa1, #capa2, #capa3, #capa4, #capa5{
display: none;
float: right;
position: absolute;
width: 350px;
background: #ffffff;
text-align: justify;
margin-top: 30px;
font-size: 14px;
}

y la función ponla así

<script language="JavaScript">


</script>

... y para que al hacer click no pegue un salto hacia arriba añádele un return false detrás de la llamada a la función

onclick="mostrar('capa1');return false"

con eso funciona ok

amanda75 · #10 (**permalink**) 04/07/2004, 08:52

Funciona perfecto, se muestran las capas en su sitio, no se solapa el pie, perfecto

Pero no consigo solucionar una cosa: se carga en blanco. ¿Cómo tendría que hacer para que al cargarse la página lo hiciese mostrando un <div> determinado? ¿por ejemplo que mostrase el <div> de id "capa1" ?

tunait · #11 (**permalink**) 04/07/2004, 08:55

Ah, mira, ponle esto a body

<body onload="mostrar('capa1')" ....

o la capa que quieras

amanda75 · #12 (**permalink**) 04/07/2004, 09:09

(((

)))