Navegador dinámico con javascript

0
Navegador dinámico con javascript

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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.

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies