Navegador dinámico 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 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:

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.

<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.

Siguiente

Usuarios que han visto este tema también han visto...

- Javascript no obstructivo, Manual de buenas maneras
- Construye tu propio reloj
- Precarga simple para página web
- Enviar mediante POST y GET usando AJAX
- Capa Deslizante

- Versión imprimible de este documento
- Enviar por e-mail este documento

Publicidad