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:
| 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.
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>
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"
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>
|
Nombre del Tutorial
Visitas
Ir arriba