> Manuales > Taller de Javascript

Te enseñamos con un ejemplo práctico a crear una barra de navegación dinámica con algunas imágenes y Javascript.

Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links
Vamos a ver como hacer, con Javascript y unas cuantas imágenes, una barra de navegación para una página web, que cambie cuando el ratón pase por encima.

Esta ayuda técnica está pensada para leerla a continuación del informe Rollover con javascript, publicado en desarrolloweb, pues contiene las bases sobre las que vamos a trabajar ahora.

1. Construimos las imágenes

Tenemos que construir dos versiones de barra de navegación, una que esté iluminada, por asi decirlo, y otra que esté un poco mas pagagada. Al pasar el ratón cambiaremos de una a otra.

Aquí están las imágenes que proponemos para este ejercicio:

APAGADAS ILUMINADAS


2. Creamos la barra con HTML

Con una tabla de HTML vamos a hacer la barra de navegacion para la página, aun sin movimiento. Con estos detalles:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><a href="portada.html"><img src="portada1.gif" width=110 height=16 alt="Portada" border="0" name="imagen1"></a></td>
</tr>
<tr>
    <td><a href="aficciones.html"><img src="aficciones1.gif" width=110 height=16 alt="Aficciones" border="0" name="imagen2"></a></td>
</tr>
<tr>
    <td><a href="curriculum.html"><img src="curriculum1.gif" width=110 height=16 alt="Curriculum" border="0" name="imagen3"></a></td>
</tr>
<tr>
    <td><a href="mitierra.html"><img src="mitierra1.gif" width=110 height=16 alt="Mi tierra" border="0" name="imagen4"></a></td>
</tr>
<tr>
    <td><a href="amigos.html"><img src="amigos1.gif" width=110 height=16 alt="Amigos" border="0" name="imagen5"></a></td>
</tr>
<tr>
    <td><a href="links.html"><img src="links1.gif" width=110 height=16 alt="Links" border="0" name="imagen6"></a></td>
</tr>
</table>

3. Precargamos las imágenes

Para tener las imágenes ya en nuestro explorador antes de que se vayan a utilizar, debemos precargarlas usando Javascript, asi conseguiremos que el efecto de rollover sea rápido, y cambien las imágenes velozmente según se pase el ratón.

Utilizaremos este código, que se coloca en la cabecera del documento HTML:

<script>

   iluminada1 = new Image(110,16)
   iluminada1.src = "portada2.gif"
   apagada1 = new Image(110,16)
   apagada1.src = "portada1.gif"
  
   iluminada2 = new Image(110,16)
   iluminada2.src = "aficciones2.gif"
   apagada2 = new Image(110,16)
   apagada2.src = "aficciones1.gif"
  
   iluminada3 = new Image(110,16)
   iluminada3.src = "curriculum2.gif"
   apagada3 = new Image(110,16)
   apagada3.src = "curriculum1.gif"
  
   iluminada4 = new Image(110,16)
   iluminada4.src = "mitierra2.gif"
   apagada4 = new Image(110,16)
   apagada4.src = "mitierra1.gif"
  
   iluminada5 = new Image(110,16)
   iluminada5.src = "amigos2.gif"
   apagada5 = new Image(110,16)
   apagada5.src = "amigos1.gif"
  
   iluminada6 = new Image(110,16)
   iluminada6.src = "links2.gif"
   apagada6 = new Image(110,16)
   apagada6.src = "links1.gif"     
  
</script>


4. Los eventos

Tenemos que definir los eventos onmouseover y onmouseout para cada uno de los enlaces, indicando el cambio de la imagen a iluminada y a apagada respectivamente.

onmouseover="window.document['imagen1'].src =iluminada1.src"
onmouseout="window.document['imagen1'].src = apagada1.src"

onmouseover="window.document['imagen2'].src =iluminada2.src"
onmouseout="window.document['imagen2'].src = apagada2.src"

onmouseover="window.document['imagen3'].src =iluminada3.src"
onmouseout="window.document['imagen3'].src = apagada3.src"

onmouseover="window.document['imagen4'].src =iluminada4.src"
onmouseout="window.document['imagen4'].src = apagada4.src"

onmouseover="window.document['imagen5'].src =iluminada5.src"
onmouseout="window.document['imagen5'].src = apagada5.src"

onmouseover="window.document['imagen6'].src =iluminada6.src"
onmouseout="window.document['imagen6'].src = apagada6.src"


5. Código entero

Eso es todo. A continuación podemos ver el código entero de este ejemplo:

<html>
<head>
 <title>Navegador</title>
<script>

   iluminada1 = new Image(110,16)
   iluminada1.src = "portada2.gif"
   apagada1 = new Image(110,16)
   apagada1.src = "portada1.gif"
  
   iluminada2 = new Image(110,16)
   iluminada2.src = "aficciones2.gif"
   apagada2 = new Image(110,16)
   apagada2.src = "aficciones1.gif"
  
   iluminada3 = new Image(110,16)
   iluminada3.src = "curriculum2.gif"
   apagada3 = new Image(110,16)
   apagada3.src = "curriculum1.gif"
  
   iluminada4 = new Image(110,16)
   iluminada4.src = "mitierra2.gif"
   apagada4 = new Image(110,16)
   apagada4.src = "mitierra1.gif"
  
   iluminada5 = new Image(110,16)
   iluminada5.src = "amigos2.gif"
   apagada5 = new Image(110,16)
   apagada5.src = "amigos1.gif"
  
   iluminada6 = new Image(110,16)
   iluminada6.src = "links2.gif"
   apagada6 = new Image(110,16)
   apagada6.src = "links1.gif"     
  
</script>
</head>

<body bgcolor="#6e6d52">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><a href="portada.html" onmouseover="window.document['imagen1'].src =iluminada1.src" onmouseout="window.document['imagen1'].src = apagada1.src"><img src="portada1.gif" width=110 height=16 alt="Portada" border="0" name="imagen1"></a></td>
</tr>
<tr>
    <td><a href="aficciones.html" onmouseover="window.document['imagen2'].src =iluminada2.src" onmouseout="window.document['imagen2'].src = apagada2.src"><img src="aficciones1.gif" width=110 height=16 alt="Aficciones" border="0" name="imagen2"></a></td>
</tr>
<tr>
    <td><a href="curriculum.html" onmouseover="window.document['imagen3'].src =iluminada3.src" onmouseout="window.document['imagen3'].src = apagada3.src"><img src="curriculum1.gif" width=110 height=16 alt="Curriculum" border="0" name="imagen3"></a></td>
</tr>
<tr>
    <td><a href="mitierra.html" onmouseover="window.document['imagen4'].src =iluminada4.src" onmouseout="window.document['imagen4'].src = apagada4.src"><img src="mitierra1.gif" width=110 height=16 alt="Mi tierra" border="0" name="imagen4"></a></td>
</tr>
<tr>
    <td><a href="amigos.html" onmouseover="window.document['imagen5'].src =iluminada5.src" onmouseout="window.document['imagen5'].src = apagada5.src"><img src="amigos1.gif" width=110 height=16 alt="Amigos" border="0" name="imagen5"></a></td>
</tr>
<tr>
    <td><a href="links.html" onmouseover="window.document['imagen6'].src =iluminada6.src" onmouseout="window.document['imagen6'].src = apagada6.src"><img src="links1.gif" width=110 height=16 alt="Links" border="0" name="imagen6"></a></td>
</tr>
</table>

</body>
</html>



Ejemplo funcionando

Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links


Evidentemente, hay muchas otras maneras de hacer una barra de navegación, pero esta es una buena forma. Con un poco de creatividad podrás crear unas bonitas imágenes que hagan unos bonitos efectos al pasar el ratón por encima.

En este archivo zip puedes encontrar el código y las imágenes del ejemplo.
.zipnavegador.zip 11Kb

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual