Navegador dinámico javascript

  • Por
Te enseñamos con un ejemplo práctico a crear una barra de navegación dinámica con algunas imágenes y Javascript.
Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links
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.

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>


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:

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



Ejemplo funcionando

Portada
Aficciones
Curriculum
Mi tierra
Amigos
Links


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.
.zipnavegador.zip 11Kb

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pedro

26/11/2003
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

Andrea

14/5/2004
Excelente artículo. Pero tengo un problema. Al tener la web en el disco duro funciona perfectamenet y con rapidez mientras que al subirlo, no sólo no me lo carga sino que cuando paso el puntero por encima tarda más de 2 minutos en enseñar la imagen2. ¿Cómo lo puedo arreglar? Gracias por su tiempo.

wladimir

31/1/2005
No creen que sería mucho más fácil lograr el efecto de imágenes"iluminadas/apagadas" con el dhtml. (se entiende que es un tutorial de javascript pero hay que reconocer que el código completo se ve muy amenazador, al conrario del del dhtml).

Espero que valoren y consideren la sugerencia.Gracias

David

11/7/2005
Mi comentario es saber , como se podria utilizar ó hacer con un fichero externo de javascript, que quedara como menu.js.
Gracias.

Cecilia

17/11/2005
Felicidades está excelente el artículo, claro y sencillo, me ha sido de mucha ayuda :D Si alguien sabe como agregar submenús se lo agradecería bastante.

Misael Montoya Herrera

18/11/2005
Solo para felicitarlos por el gran trabajo que hacen en su pagina, pues tiene ejemplos prácticos muy bien explicados, que hacen que cualquiera persona que tenga mínimos conocimientos sobre el tema, pueda entender facilmente.
¡¡¡FELICIDADES!!!

juancho

24/9/2009
pro como hago para poner el menu encima d una imagen.. n plantillas. css.. pro el menu es asi vertical
lo q pasa e q no puedo colocar el menu ecima d la imagen.. xq la imagen esta en una plantilla.. css.. y el menu m sale abajo.. o arriba.. pro lo quiero poner a la izquierda.. de la imagen y no m sale.. i m respondes lo agradeceria...

betin

19/4/2010
Navegador dinámico javascript
en lo personal me sirvio mucho ese tutorial, solo quisiera saber que necesito para que al momento de darle click a la imagen esta se quede encendida, para saber en que parte me encuentro, no se si me explique, de antemano gracias.

Abner Palacio

11/8/2011
Insercion de codigo
Gracias... seguí sus pasos y me salió muy bien, pero me queda la duda de como insertar todo ese codigo dentro de una capa de una pagina web