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.
Artículo obsoleto: No recomendamos las técnicas que se explican en este artículo por dos motivos: 1) trabaja con modelos de navegadores muy antiguos haciendo técnicas que realmente no son necesarias hoy. 2) Realiza código distinto dependiendo del navegador, cuando lo aconsejable es no preguntar nunca por el navegador del usuario, sino por las funcionalidades que se desean usar.
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:
- ns4: que estará a true si el navegador utilizado es Netscape
- ie4: que estará a tru si el naveagor utilizado es Internet Explorer
La función que utilizamos para inicializar el valor de las variables es la siguiente:
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>
|
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
Carlos es ingeniero informático por la UPM (Politécnico de Madrid), especializad...