Foros del Web » Creando para Internet » Diseño web »

Ocultar capas

Estas en el tema de Ocultar capas en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/10/2009, 11:55
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 11 años, 9 meses
Puntos: 0
Ocultar capas

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
  #2 (permalink)  
Antiguo 13/10/2009, 12:03
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ocultar capas

Hola Javiglez

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

Bye
  #3 (permalink)  
Antiguo 13/10/2009, 12:14
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Ocultar capas

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;
}
  #4 (permalink)  
Antiguo 13/10/2009, 12:19
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ocultar capas

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.
  #5 (permalink)  
Antiguo 13/10/2009, 12:30
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Ocultar capas

vale!! asi funciona pero lo que quiero es con el onmouseover no con el onclick, hay solución?
  #6 (permalink)  
Antiguo 13/10/2009, 13:24
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Ocultar capas

Cita:
Iniciado por Javiglez Ver Mensaje
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...
  #7 (permalink)  
Antiguo 13/10/2009, 13:42
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ocultar capas

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
  #8 (permalink)  
Antiguo 13/10/2009, 14:17
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Ocultar capas

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
  #9 (permalink)  
Antiguo 13/10/2009, 16:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ocultar capas

¿Y qué tal hacerlo sin javascript, como aquí o aquí?
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 13/10/2009, 16:50
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ocultar capas

Pues claro que sí, Mik.

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

Bye
  #11 (permalink)  
Antiguo 13/10/2009, 17:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ocultar capas

Sí, había empezado por ahí, pero luego sigue con:
Cita:
Iniciado por Javiglez Ver Mensaje
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...
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 13/10/2009, 18:33
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ocultar capas

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

Bye
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




La zona horaria es GMT -6. Ahora son las 20:29.