Rollover com Javascript

Aprenda a fazer um efeito de iluminação sobre uma imagem ao passar o mouse por cima. Pelo ponto de vista prático, você mesmo será capaz de fazer em alguns minutos.

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:



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


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!