Navegador dinâmico Javascript

Mostramos com um exemplo prático como criar uma barra de navegação dinâmica com algumas imagens e Javascript.

Vamos ver como fazer, com Javascript e umas imagens, uma barra de navegação para uma página web, que mude quando o mouse passe por cima.

Esta ajuda técnica está pensada para ser lida em seguida do informe Rollover com Javascript, publicado em CriarWeb, pois contém as bases sobre o que vamos trabalhar agora.

1. Construimos as imagens

Temos que construir duas versões de barra de navegação, umas que esteja iluminada, por assim dizer, e outra que esteja um pouco apagada. Ao passar o mouse mudaremos de uma a outra.

Aqui estão as imagens que propomos para este exercício:

APAGADAS	ILUMINADAS

2. Criamos a barra com HTML

Com uma tabela de HTML vamos fazer a barra de navegação para a página, ainda sem movimento. Cm estes detalhes:

À princípio colocamos as imagens apagadas
Cada imagem tem um link à página correspondente
Demos um nome diferente a cada imagem com o atributo name. desde imagem1 até a imagem6.
Nossa tabela tem cellpadding e cellspacing 0 para que não fique separação entre as imagens. Por esta última razão, também não devemos deixar espaço em branco no código HTML entre os TD e as imagens.

3. Pré-carregamos as imagens

Para ter as imagens já em nosso explorador antes de que sejam utilizadas, devemos pré-carregar usando Javascript, assim conseguiremos que o efeito de rollover seja rápido, e mudem as imagens velozmente segundo se passe o mouse.

Utilizaremos este código, que se coloca no cabeçalho do documento HTML:

4. Os eventos

Temos que definir os eventos onmouseover e onmouseout para cada um dos links, indicando a mudança da imagem à iluminada e à apagada respectivamente.

onmouseover="window.document['imagem1'].src =iluminada1.src"
onmouseout="window.document['imagem1'].src = apagada1.src"

onmouseover="window.document['imagem2'].src =iluminada2.src"
onmouseout="window.document['imagem2'].src = apagada2.src"

onmouseover="window.document['imagem3'].src =iluminada3.src"
onmouseout="window.document['imagem3'].src = apagada3.src"

onmouseover="window.document['imagem4'].src =iluminada4.src"
onmouseout="window.document['imagem4'].src = apagada4.src"

onmouseover="window.document['imagem5'].src =iluminada5.src"
onmouseout="window.document['imagem5'].src = apagada5.src"

onmouseover="window.document['imagem6'].src =iluminada6.src"
onmouseout="window.document['imagem6'].src = apagada6.src"

5. Código inteiro

Isso é tudo que se necessita. A seguir podemos ver o código inteiro deste exemplo:

<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['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].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['imagem2'].src =iluminada2.src" onmouseout="window.document['imagem2'].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['imagem3'].src =iluminada3.src" onmouseout="window.document['imagem3'].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['imagem4'].src =iluminada4.src" onmouseout="window.document['imagem4'].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['imagem5'].src =iluminada5.src" onmouseout="window.document['imagem5'].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['imagem6'].src =iluminada6.src" onmouseout="window.document['imagem6'].src = apagada6.src"><img src="links1.gif" width=110 height=16 alt="Links" border="0" name="imagen6"></a></td>
</tr>
</table>

</body>
</html>

Exemplo funcionando

Evidentemente, existem muitas outras maneiras de fazer uma barra de navegação, mas esta é uma boa forma. Com um pouco de criatividade você pode criar umas imagens bonitas que façam uns efeitos legais ao passar o mouse por cima.