Navegador con capas

  • Por
Aprende a crear un navegador dinámico con capas. Al pasar el ratón por encima de los enlaces aparece una descripción de éstos.
Ya hemos recibido más de una solicitud pidiendonos la realización de este reportaje que, en unos simples pasos, te permitirá crear una barra de navegación dinámica usando capas. Haremos que unas capas muestren información sobre el enlace donde esté situado el ratón.

Para comprender este ejercicio es muy recomendable que se lea despueús del reportaje para ocultar y mostrar capas, publicado en este mismo sitio. Puede que antes de continuar quieras ver el resultado de lo que vamos a crear.

1. Colocamos la capa donde se situarán los enlaces

La capa donde van a estar los enlaces tendría esta forma, como es código HTML la colocaremos dentro del <BODY> de la página:

<div align="" id="enlaces" style="font-size: 10pt; font-family: arial,verdana,helvetica; font-weight: bold; color: #333399; position: absolute; height: 58; width: 100; background-color: #ffffcc; text-align: right;top: 10px;left: 10px">

<a href="#" OnMouseOver="muestra(capa1)" OnMouseOut= "oculta(capa1)">Mis Amigos</a>
<br>
<a href="#" OnMouseOver="muestra(capa2)" OnMouseOut= "oculta(capa2)">Mi pueblo</a>
<br>
<a href="#" OnMouseOver="muestra(capa3)" OnMouseOut= "oculta(capa3)">Enlaces</a>

</div>

Lo importante de la capa, y donde tenemos que fijar la atención es en los enlaces. Cuando colocamos el ratón sobre un enlace y cuando lo retiramos de él se llama a las funciones muestra() y oculta() pasándoles el nombre de la capa que se desea mostrar o ocultar.

Si tenemos más opciones en nuestra barra de navegación nada más tendríamos que añadir más enlaces.

También hay que destacar la declaración de estilos de la capa (atributo style de la etiqueta <DIV>), pero esto no son más que estilos css.

2. Colocamos las capas de explicación de cada enlace

Cada capa es una etiqueta <DIV>, se muestran a continuación:

<div id="descripcion1" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Los amigos reunidos jam&aacute;s ser&aacute;n vencidos<br>Con todo el texto que desees</div>

<div id="descripcion2" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">El pueblo m&aacute;s tur&iacute;stico de todo el polo norte, a 20.000 kil&oacute;metros de la gasolinera m&aacute;s cercana</div>

<div id="descripcion3" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Todos los enlaces que necesitas para entrar en Internet con las m&aacute;ximas garant&iacute;as de &eacute;xito.</div>

En este código hay que destacar que cada capa tiene un nombre, asignado gracias al atributo id de la etiqueta <DIV>.

Además, todas las capas tienen una buena lista de estilos CSS, el más significativo en este caso es el que hace que en un principio las capas estén ocultas: visibility:hidden.

Los demás estilos aplicados a cada capa son nada más que estilos, los puedes cambiar y ponerlos a tu gusto, así como el texto de las capas que será el que convenga en cada momento.

Por útimo, señalar que si habías incluido más enlaces en la barra de navegación, deberás poner más capas con descripciones de estos.

3. Colocamos el Javascript

Hay que recordar que este ejercicio está hecho a continuación del reportaje de cómo mostrar y ocultar capas con Javascript, y que la mayor parte del siguiente código Javascript ya está comentado.

En líneas generales, se debe conservar el mismo Javascript que el de la página de mostrar-ocultar capas. Veamos el código y a continuación lo comentamos:

<script language="javascript">
var capa

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

function init() {
   if (ns4) {
     capa1 = document.descripcion1
     capa2 = document.descripcion2
     capa3 = document.descripcion3
  }
 if (ie4) {
   capa1 = descripcion1.style
   capa2 = descripcion2.style
   capa3 = descripcion3.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>

En las primeras líneas detectamos cuál es el navegador que está utilizando el usuario.

Luego tenemos la función init(), que es la única que cambia con respecto al ejemplo de mostrar-ocultar capas. En concreto, hemos colocado el código que sirve para inicializar las variables de capa, que se asocian con las capas donde has colocado las descripciones.

Para finalizar con el script, se pueden ver las funciones que muestran y ocultan capas.

4. Último detalle

No se nos debe olvidar colocar en la etiqueta <BODY> el evento onload para ejecutar la función init() una vez que se ha terminado de cargar la página. De esta manera:

<body onLoad="init()">

5. El código completo de la página

<html>
<head>
<title>Navegador con capas</title>

<script language="javascript">
var capa

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

function init() {
   if (ns4) {
     capa1 = document.descripcion1
     capa2 = document.descripcion2
     capa3 = document.descripcion3
  }
 if (ie4) {
   capa1 = descripcion1.style
   capa2 = descripcion2.style
   capa3 = descripcion3.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()" link="#333399" vlink="#333399">

<!-- CAPA CON LOS DISTINTOS ENLACES -->
<div align="" id="enlaces" style="font-size: 10pt; font-family: arial,verdana,helvetica; font-weight: bold; color: #333399; position: absolute; height: 58; width: 100; background-color: #ffffcc; text-align: right;top: 10px;left: 10px">
<a href="#" OnMouseOver="muestra(capa1)" OnMouseOut= "oculta(capa1)">Mis Amigos</a>
<br>
<a href="#" OnMouseOver="muestra(capa2)" OnMouseOut= "oculta(capa2)">Mi pueblo</a>
<br>
<a href="#" OnMouseOver="muestra(capa3)" OnMouseOut= "oculta(capa3)">Enlaces</a>
</div>

<!-- CAPAS CON LAS EXPLICACIONES -->
<div id="descripcion1" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Los amigos reunidos jam&aacute;s ser&aacute;n vencidos<br>Con todo el texto que desees</div>
<div id="descripcion2" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">El pueblo m&aacute;s tur&iacute;stico de todo el polo norte, a 20.000 kil&oacute;metros de la gasolinera m&aacute;s cercana</div>
<div id="descripcion3" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Todos los enlaces que necesitas para entrar en Internet con las m&aacute;ximas garant&iacute;as de &eacute;xito.</div>

</body>
</html>
 

Aquí acabó todo. Este ejemplo es muy versatil, seguro que no te cuesta nada añadir nuevas capas y crear unas barras totalmente personalizadas. Si deseas ver el ejemplo en movimiento, pulsa este enlace.

Si lo deseas, puedes descargar los textos y ejemplos de esta ayuda. .zipreportajecapas2.zip 4Kb

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

NoC

03/9/2002
Hola. El artículo es interesante y la función que describe, desde luego, muy atractiva: en realidad es atractivo todo lo que incrementa el dinamismo de las páginas. Sin embargo, tengo un pequeño problema... Kizás alguien tenga una solución.
¿Cómo compatibilizar esta función con Netscape 7?
La consola de javascript me informa de que "capa1" no está definido...

RESPUESTA:

Resulta que esa pregunta es muy buena, pero imposible de responder sin utilizar muchas, muchas líneas de texto. Totalmente fuera de el objetivo de este comentario.

El caso es que los navegadores han evolucionado desde que se trabajaba como indica este artículo. Ahora tienen un modelo de objetos nuevo, para todo lo que es DHTML y manejo de capas. Lo bueno es que este modelo es y será compatible en todos los navegadores del futuro. Lo malo es que ahora hay que adaptar los scripts a este nuevo modelo, conservando la compatibilidad con los navegadores anteriores.

El estudio de ese nuevo modelo y la práctica es un objetivo de DesarrolloWeb.com para el futuro, pero merecerá la pena esperar a que se haga un poco más popular y hayamos tocado antes muchos otros temas importantes y mucho más básicos.

Por ahora, sirva indicar que existen páginas que tratan por entero de este tema y que nos pueden resultar muy esclarecedoras. Por ejemplo, Cross Browser ofrece un tutorial sobre el tema y lo que es más importante, un juego de funciones que sirven para que nuestras páginas puedan realizar todo tipo de efectos dinámicos fácilmente. Scott Andrew también tengo entendido que trata el tema en su página. Además, Dynduo parece que se está reformando para incluir también la compatibilidad con navegadores más modernos.

Espero que podamos ayudar más en este tema en adelante.

Amy

24/1/2005
Hola
el articulo es muy bueno, pero como podria incluir un contenido dinamico en vez de estatico en las capas?, como por ejemplo el resultado de un query.
Agradezco sus respuestas, me urge{!

Monica

29/8/2005
el tema es muy interesante, ahora la duda es si en esas capas se pueden poner imagenes. Y como se hace.

Pepe

22/11/2005
Pues en Firefox no funciona, en explorer sí

Esteban Maidana

28/7/2006
Hola amigos, la utilización de capas es muy interesante. Quisiera saber si ellas funcionan con mozilla firefox?

Hay forma de compatibilizarla?

Desde ya muchas gracias

cesar

04/12/2007
el enlace a la pagina de ejemplo no funciona

salvacarvajal

05/9/2012
¿Obsoleto?
Ha pasado ya mucho tiempo desde la redacción de este interesante artículo. En mi opinión debería editarse para adaptarlo a las versiones actuales de los navegadores más empleados.
Saludos.