Navegador dinámico javascript
Te enseñamos con un ejemplo práctico a crear una barra de navegación dinámica con algunas imágenes y Javascript.
01/1/70 -
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:
|
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>
|
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.
navegador.zip 11Kb
Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 4 categorias relacionadas
+ 1 comentario (Añadir)
+ 5 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo |
|
Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
* Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en
Colecciones de scripts+ Entrar en
DHTML+ Entrar en
Scripts en Javascript+ Entrar en
Scripts DHTML
Comentarios de los visitantes
|
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
|
| Se muestra un comentario revisado |
Comentario de Pedro
26/11/03
Hola...lo primero de todod es felicitarlos por el buen trabajo que estais realizando a lo largo de los distintos manuales y artículos que realizais...
Bueno vamos a ver este artículo está muy bien pero tengo una duda y si a este navegador nos interesa que tenga unos submenús q se muestren al pasar por encima de de uno de ellos como se trataria el código?¿
Gracias por su tiempo
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se han encontrado 5 comentarios sin revisar
Ir arriba