> Manuales > Taller de Javascript

El propósito de este artículo, es hacer que se muestre u oculte una capa cuando se pasa con el ratón por encima de otra. Gracias a esta técnica, las páginas tendrán un aspecto mucho más dinámico.

El propósito de este artículo, es hacer que se puedan mostrar capas y ocultar capas cuando se pasa con el ratón por encima de otra. Gracias a esta técnica, las páginas tendrán un aspecto mucho más dinámico.

Nota: desde que se publicó este artículo han salido muchas versiones de navegadores nuevos. Para trabajar con capas y hacer código compatible con todos los navegadores tenemos un manual en DesarrolloWeb.com que es de muy interensante lectura: Taller de Cross-Browser DHTML

1.Conocer el navegador que esta utilizando el usuario

Como Netscape e Internet Explorer llaman de forma distinta a las capas, lo primero que haremos, será detectar qué navegador se está utilizando. Para ello, lo que vamos a hacer es crear dos variables globales dentro de nuestro Script:

var ns4,ie4

La función que utilizamos para inicializar el valor de las variables es la siguiente:

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false


2.Crear una variable que contenga a cada una de las capas

Una vez están creadas e inicializadas las variables del navegador, tenemos que crear otra variable, que contenga a la capa que queremos mostrar u ocultar. Esta variable se inicializará de forma distinta dependiendo del navegador que esté utilizando el usuario.

La siguiente funcion inicializa el valor de la variable "capa" con el nombre que tiene la capa que queremos mostrar u ocultar, en este caso se llamará "menu".

var capa

function init() {
 if (ns4) {
      capa = document.menu
  }
 if (ie4) {
 capa = menu.style
 }
}

3.Crear una función que muestre una capa

A continuación, definimos una función que dependiendo de si se esta utilizando el navegador Netscape o el Internet Explorer, cambiará el atributo de la capa que se le pasa por parámetro a visible. Para Netscape, llámará al Método Show, que será el encargado de cambiar el atributo. En Internet Explorer cambiaremos el atributo directamente.

function muestra(obj) {
 if (ns4) obj.visibility = "show"
 else if (ie4) obj.visibility = "visible"
}

4.Crear una función que oculte una capa

Al igual que con la función anterior, dependiendo si el navegador es Netscape o IE, cambiaremos de una forma u otra el atributo de la capa a oculto

function oculta(obj) {
 if (ns4) obj.visibility = "hide"
 else if (ie4) obj.visibility = "hidden"
}

5.Crear las dos capas

Una vez tenemos definido las acciones de mostrar u  ocultar capa, hay que crear el cuerpo del documento, en primer lugar, pediremos al navegador que ejecute la función Init, de forma que la variable capa esté lista para usar:

<body Onload="Init()">

Además tenemos que crear dos capas, la primera de ellas va a ser la que se va a ocultar y mostar. El nombre de la capa deberá ser Menu, que es la que hemos decidido utilizar en el punto 2.

<div id="menu" style="position: .....   ">

Además, hay que crear la segunda capa, que mostará la capa menu cuando el ratón esté encima de ella, y la ocultará cuando no. Cada una de estas acciones las realizará las funciones Muestra y Oculta, definidas en el punto 4.

Colocaremos además dentro de esta capa un enlace, con los manejadores de eventos necesarios para realizar acciones cuando se pose o no el ratón sobre el. Cuando se produzca el evento OnMouseOver (que el ratón entre en el enlace dentro de la capa), pediremos al navegador que ejecute la función Muestra, y cuando se produzca el evento OnMouseOut (que el ratón salga del enlace de la capa), pediremos al navegador que ejecute la función Oculta. Por lo que la definición de la capa quedará de la siguiente forma:

<div id="nombreCapa" Style="position:...."><a href="pagina.html" OnMouseOver="Muestra(capa)" OnMouseOut= "Oculta(capa)">Textode lacapa</a></div>

Y con esto ya está todo...

6.Código completo:

<html>
<head>
 <title>Untitled</title>

<script language="javascript">
var capa

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
   if (ns4) {
     capa = document.menu
  }
 if (ie4) {
   capa = menu.style
 }
}

function muestra(obj) {
 if (ns4) obj.visibility = "show"
 else if (ie4) obj.visibility = "visible"
}

function oculta(obj) {
 if (ns4) obj.visibility = "hide"
 else if (ie4) obj.visibility = "hidden"
}

</script>
</head>
<body onLoad="init()">
<div id="menu" style= "position:Absolute;left:50; top:60; background-color:#ff1133; visibility:hidden">hola</div>
<div id="CapaNormal" style= "position:absolute;left:50; top:150;background-color:pink;"><a href="#" OnMouseOver="muestra(capa)" OnMouseOut= "oculta(capa)">Ponte encima</a>...</div>
</body>
</html>

Con los conocimientos aquí aprendidos puedes intentar crear una barra de navegación dinámica que tenga varias opciones que, al pasar el ratón por encima, se vean sus distintas descripciones. Puedes encontrar en este sitio un artículo que te informa sobre cómo hacerlo.

Nota: Este artículo, aunque puede servir de ayuda e introducción al trabajo con capas, se encuentra un poco desfasado. Existen herramientas que pueden hacernos la vida más fácil.

Si deseamos hacer código que funcione correctamente para el trabajo con capas, podemos apoyarnos en unas librerías que nos permitan su manejo compatible con todos los navegadores.

En el artículo Cross-Browser. DHTML compatible con todos los navegadores tenemos más detalles.

Carlos Luis Cuenca

Manual