Valoración del artículo: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:
La función que utilizamos para inicializar el valor de las variables es la siguiente:
| 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. |
6 comentarios revisados:| Por: mamen | 24/6/03
|
RESPUESTA
En realidad sí que puedes llamar a elementos de frames distintos al que estás, ya sean capas, elementos del formulario o funciones javascript.
Tenemos un manual que trata este tema en detalle: Control de frames con Javascript
| Por: Omar | 23/2/04
|
| Por: javier | 05/3/04
|
RESPUESTA
Puede que sea por incompatibilidades entre distintos navegadores que unas veces funcione y otras no. De todos modos este ejemplo se encuentra un poco desfasado. 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.
| Por: palomeke | 07/3/06
|
| Por: Boludo | 11/7/06
|
| Recomendamos Mootools o jQuery | 07/4/09 |
Usuarios: 
