Ocultar capas

Javiglez · #1 (**permalink**) 13/10/2009, 10:55

Hola, quiero mostrar una capa y ocultar en función de si se pasa con el ratón por encima de otra capa de exactas dimensiones y posicionamiento. Una capa es Contenido1 y la otra

El código es sencillo pero no me funciona

Código HTML:

<div id="Contenido1" onmouseover="mostrar ('Contenido11')" onmouseout="ocultar ('Contenido11')">
</div>

y las funciones bien fáciles...

Código PHP:

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

El caso es que me funciona muy mal porque paso por encima de la capa para que se muestre la otra y al estar superpuesta parace como que parpadea al ser de distinto color...es como si sacara el puntero de la capa pero no la saco y parpadea no se si me explico

deirdre · #2 (**permalink**) 13/10/2009, 11:03

Hola Javiglez

¿Has probado dándole tamaño al div? Como no has puesto el estilo del id 'Contenido1', pues por eso pregunto...

Bye

Javiglez · #3 (**permalink**) 13/10/2009, 11:14

el estilo en CSS

Código HTML:

#Contenido1 {
	position:absolute;
	top:3%; left:10%; 
	width:80%; 
	height:30%;
	background:#039;
	filter:alpha(opacity=20); /*Indica una opacidad del 60% (Equivalente al 40% de transparencia) en Internet Explorer.*/
	-moz-opacity:.20; /*Indica una opacidad del 60% en Mozilla.*/
	opacity:.20; /*Indica opacidad del 60% en Firefox y Opera. */
	z-index: 1;
	cursor:pointer;
}

#Contenido11 {
	position:absolute;
	top:3%; left:10%; 
	width:80%; 
	height: 30%;
	background:#FF3;
	z-index: 2;
	visibility: hidden;
	cursor:pointer;
}

deirdre · #4 (**permalink**) 13/10/2009, 11:19

Al ser coincidentes en tamaño y posición es normal que te produzca el parpadeo porque te está cogiendo la función mostrar y la función ocultar de forma simultánea. Haz una prueba cambiando onmouseover por onclick y constrasta el resultado.

Javiglez · #5 (**permalink**) 13/10/2009, 11:30

vale!! asi funciona pero lo que quiero es con el onmouseover no con el onclick, hay solución?

Javiglez · #6 (**permalink**) 13/10/2009, 12:24

Cita:

Iniciado por Javiglez

vale!! asi funciona pero lo que quiero es con el onmouseover no con el onclick, hay solución?

Sino con otro código, lo que necesito es que cuando pase por encima de la capa se muestre la otra, sino había pensado en que cuando pase por encima con el ratón cambiarla de color, y solo utilizar una capa...

deirdre · #7 (**permalink**) 13/10/2009, 12:42

Prueba esto:

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>Sin título 1</title>
<style type="text/css">
#contenido1 {
	position:absolute;
	top:3%; left:10%; 
	width:80%; 
	height:30%;
	background:#039;
	filter:alpha(opacity=20); /*Indica una opacidad del 60% (Equivalente al 40% de transparencia) en Internet Explorer.*/
	-moz-opacity:.20; /*Indica una opacidad del 60% en Mozilla.*/
	opacity:.20; /*Indica opacidad del 60% en Firefox y Opera. */
	cursor:pointer;
}

#contenido2 {
	position:absolute;
	top:3%; left:10%; 
	width:80%; 
	height: 30%;
	background:#FF3;
	cursor:pointer;
}
</style>
<script type="text/javascript">
function mostrar(){  
document.getElementById('contenido2').style.visibility="visible";  
}  
function ocultar(){  
document.getElementById('contenido2').style.visibility="hidden";  
}
</script>
</head>

<body>
<div id="contenido1" onmouseover="mostrar()">Contenido 1</div>
<div id="contenido2" onmouseout="ocultar()">Contenido 2</div>
</body>

</html>

Bye

Javiglez · #8 (**permalink**) 13/10/2009, 13:17

mil gracias deidre al final lo he puesto asi

Código HTML:

<div id="Contenido1" onmouseover="mostrar('Contenido11')">
                </div>
                <div id="Contenido2" onmouseover="mostrar ('Contenido22')">
                </div>
                <div id="Contenido3" onmouseover="mostrar ('Contenido33')">
                </div>
                <div id="Contenido11" onmouseout="ocultar('Contenido11')">
                </div>
                <div id="Contenido22" onmouseout="ocultar('Contenido22')">
                </div>
                <div id="Contenido33" onmouseout="ocultar('Contenido33')">
                </div>

la clave es en en efecto en una capa onmouseover y la otra onmouseout

Mikmoro · #9 (**permalink**) 13/10/2009, 15:27

¿Y qué tal hacerlo sin javascript, como aquí o aquí?

deirdre · #10 (**permalink**) 13/10/2009, 15:50

Pues claro que sí, Mik.

"Mi solución" es sólo siguiendo el camino que Javiglez había iniciado.

Bye

Mikmoro · #11 (**permalink**) 13/10/2009, 16:05

Sí, había empezado por ahí, pero luego sigue con:

Cita:

Iniciado por Javiglez

sino había pensado en que cuando pase por encima con el ratón cambiarla de color, y solo utilizar una capa...

de manera que ya se estaba poniendo más a tiro para hacerlo de manera más accesible y simple, sin depender de JS. Por eso lo decía.

Ya sabes que para mi, siempre que haya una oportunidad de adoctrinar...

deirdre · #12 (**permalink**) 13/10/2009, 17:33

Tus doctrinas son para seguirlas (incluso a ciegas): siempre dan buenos resultados

Bye