 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Mostrar y ocultar capas con IE 5,6 NS 6,7
Explicación y ejemplos sobre la manera de mostrar y ocultar capas con el método getElementById() de Javascript.
28/1/03 - Lo primero, es definir las funciones de mostrar y ocultar. Estas dos funciones, recibirán por parámetro, el nombre de la capa que se quiere mostrar u ocultar, a continuación, mediante la función getElementById, accederemos a las propiedades de la capa, y a través de style a los estilos que nos definen si la capa esta visible o no (propiedad visibility), activándola o desactivándola según la función.
| Referencia: Hablamos sobre la función getElementById() en el artículo Capas con Internet Explorer 5, 6, Netscape 6, 7 y Opera |
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
A continuación es necesario definir las capas, y llamar en algún momento a las funciones definidas. Se utilizarán los eventos onMouseOver y onMouseOut de la capa 1 para mostrar y ocultar la capa 2.
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')">Capa 1</div>
<div id="capa2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Capa 2</div>
Al pasar por encima de la capa 1 se mostrará la 2, y al salir de la capa 1, se ocultará la dos.
Ejemplo completo:
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')">Capa 1</div>
<div id="capa2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Capa 2</div>
</body>
</html>
Podemos ver el ejemplo en marcha.
Seguir navegando a partir aquí:
+ 1 manual relacionado+ 2 categorias relacionadas
+ 2 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Carlos Luis Cuenca*
URL: http://www.helloworldsolutions.com/ Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Taller de Javascript
Siguiente: Movimiento de Capas con IE 5,6 NS 6,7
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript+ Entrar en Scripts DHTML
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
