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

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 manual Rollover con javascript,

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
a a
a a
a a
a a
a a
a a
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:

  • En un principio colocamos las imágenes apagadas
  • Cada imagen tiene un enlace a la página correspondiente
  • Hemos dado un nombre distinto a cada imagen con el atributo name. desde imagen1 hasta imagen6.
  • Nuestra tabla tiene cellpadding y cellspacing 0 para que no quede separacion entre las imágenes. Por esta última razón, tampoco hay que dehar espacios en blanco en el código HTML entre los TD y las imágenes.

   

   

   

   

   

   

Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links

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:

 

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:



 Navegador

   

   

   

   

   

   

Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links