> Manuales > Taller de Javascript

Explicación y ejemplos sobre la manera de mostrar y ocultar capas con el método getElementById() de Javascript.

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.

Carlos Luis Cuenca

Manual