Exemplo de rollover

Fazer com que mude uma imagem ao passar o mouse por cima, como convidando a clicar, chamamos de rollover. É um dos efeitos mais vistosos que podemos incluir em uma página web con poucas linhas de Javascript, e sem necessidade de saber programar.

Vamos ver a técnica pela prática e com uma elemental receita:

1. Nomeamos a imagem

Colocamos na página a imagem que tem o desenho apagado. Além disso, lhe atribuímos um nome, para poder nos referirmos a ela mediante JavaScript.

<img src="desenho_apagado.gif" name="imagen1">

2. Colocamos um link na imagem

Agora colocamos o link cujo queremos navegar no momento no qual o usuário clique nele.

<a href="ir_a.html">

3. Começamos com JavaScript

Devemos colocar dois atributos HTML ao link que vai nos servir para realizar o efeito buscado.
OnMouseOver, com ele indicaremos, mediante JavaScirpt, a ação a realizar quando pousarmos o mouse em cima da imagem.
OnMouseOut nos serve para definir o evento de retirar o mouse da imagem,

<a href="ir_a.html" onmouseover="-Código JavaScript-" onmouseout="-Código JavaScript-">

4. Pegamos as imagens com JavaScript

Vamos declarar duas variáveis com JavaScript para salvar as imagens iluminada e apagada. Para isso, vamos utilizar a etiqueta <SCRIPT> de HTML. Podemos colocar o script em qualquer lugar, mas seria mais adequado colocar antes da imagem.
Os números que vocês verão correspondem com a largura e com a altura da imagem que estão pegando.

<script language=javascript>
iluminada = new Image(84,34)
iluminada.src = "desenho_iluminado.gif"
apagada = new Image(84,34)
apagada.src = "desenho_apagado.gif"
</script>

5. Escrevemos o código dos eventos

Para acessar um elemento de JavaScript utilizamos a hierarquia de objetos de JavaScript. Pode ser complicada, mas nosso objetivo é simples, assim faremos:

window.document['nome_da_imagem'].src = variavel_imagem_javascript.src

Teoricamente, os atributos HTML dos eventos onmouseover e onmouseout ficarão assim:

onmouseover="window.document['imagem1'].src= iluminada.src

onmouseout="window.document['imagem1'].src = apagada.src

5. Este é o código completo

<script language=javascript>
   iluminada = new Image(84,34)
   iluminada.src = "desenhoiluminado.gif"
   apagada = new Image(84,34)
   apagada.src = "desenhoapagado.gif"
</script>
<a href="ir_a.html"
onmouseover="window.document['imagem1'].src = iluminada.src"
onmouseout="window.document['imagem1'].src = apagada.src">
<img src="images/eugimlogo.gif" border=0 name="imagem1" width=84 height=34>
</a>

Isto é o único que vocês deve ser feito para iluminar uma imagem, é um primeiro passo, agora vocês podem provar com um grupo de imagens para criar uma barra de navegação dinâmica com Javascript!