Criando rollovers com JavaScript

Veja neste artigo como criar efeitos rollover em sua página web utilizando Javascript.

por Diego Cesar Ribeiro

Rollovers é nome dado eo efeito que ocorre quando passamos o mouse em cima de um objeto dentro de uma página web, e esse ou outro objeto é alterado. Por exemplo, quero um link em forma de imagem, que logo ao passar o mouse em cima dele, essa imagem seja substituída por outra, e logo após tirar o mouse de cima dessa imagem, ela retorne ao seu estado original. Nesse artigo será tratado desse efeito, e também dos rollovers interligados, ou seja, quando passar o mouse em cima de uma determinada imagem, outra imagem será alterada, e não ela própria, isso é muito usado em forma de menus interativos e métodos de redimensionamentos. Vamos ao trabalho, já!

Listagem 1: Exemplo básico de rollover

<img
src="imagem-principal.jpg”
onMouseover="document.imagem.src= 'imagem2.jpg' "
onMouseout="document.imagem.src= 'imagem-principal.jpg'  "
name="imagem">

No exemplo acima, a imagem será carregada junto com a página como imagem-principal.jpg. Através do evento onMouseover, quando o mouse estiver em cima da imagem, ela será substituída por imagem2.jpg. O evento onMouseout serve para substituir a imagem quando o mouse não estiver mais sobre ela, no caso, a imagem voltará a seu estado normal. Os atributos dos eventos onMouseover e onMouseout são “document.imagem.src”, respectivamente. Para que o código funcione, o name da img deve ser também “imagem,” é isso que permite a ligação entre a imagem e o evento.

Uma forma alternativa a utilização de “document.imagem”, quando o evento fizer referência à própria imagem, seria utilizar a palavra reservada “this”. No Javascript, this refere-se ao objeto que invocou o evento, neste caso, a própria imagem. Vejamos na próxima listagem como ficaria o código anterior, utilizando este recurso.

Listagem 2: Exemplo utilizando a palavra reservada this

<img
src="imagem-principal.jpg”
onMouseover="this.src= 'imagem2.jpg' "
onMouseout="this.src= 'imagem-principal.jpg'  "
name="imagem">

Para transformar esse evento em um link basta adicionar a tag ..., pondo os dois eventos onMouseover e onMouseout dentro dessa tag, ao invés da tag img src, ficando assim:

Listagem 3: Exemplo de rollover básico com link

<a
href="link.html"
onMouseover="document.imagem.src= 'imagem-principal.jpg' "
onMouseout="document.imagem.src= 'imagem2.jpg' " >
<img src="imagem-principal.jpg" name="imagem">
</a>

Esse funciona da mesma forma, a única diferença é que ao clicar na imagem, será redirecionada a página link.html. Note que, neste caso, não se pode usar o this, pois o evento tratado não é da imagem em si, e sim do link.

Outra forma de usar um rollover é interligando diferentes objetos. Por exemplo, no topo de uma página tem microimagens, uma de Einstein, uma de Allan Kardec e outra de Chico Xavier. Quando o usuário passar o mouse em cima da microimagem de Einstein, será exibida uma maior da mesma na parte central da página, e o mesmo acontecerá com as outras duas imagens da página, seria, para todos os fins, um redimensionamento. Além desse exemplo, essa função do rollover poderia ser usada para inúmeras outras coisas.

Listagem 4: Exemplo de rollover com links interligados

<a href="link.html" onMouseover="document.imagem.src= '1.png' " 
onMouseout="document.imagem.src= ''imagem-central.jpg">mudar para imagem 1</a>

<a href="link.html" onMouseover="document.imagem.src= '2.png' " 
onMouseout="document.imagem.src= ''imagem-central.jpg">Mudar para imagem 2</a>

<a href="link.html" onMouseover="document.imagem.src= '3.png' " onMouseout="document.imagem.src= ''imagem-central.jpg">Mudar para imagem 3</a>
</br>
<img src="imagem-central.jpg" name="imagem">

Figura 1: Exemplo básico de rollover interligado

Já no exemplo de redimensionamento das imagens, ficaria assim:

Listagem 5: Exemplo de redimensionamento de imagens

<img
src="imagem-pequena1.jpg"
onMouseover="document.imagem.src= 'imagem-grande1.jpg' "
onMouseout="document.imagem.src= 'imagem-normal.jpg' ">

<img
src="imagem-pequena2.jpg"
onMouseover="document.imagem.src= 'imagem-grande2.jpg' "
onMouseout="document.imagem.src= 'imagem-normal.jpg' ">

<img
src="imagem-pequena3.jpg"
onMouseover="document.imagem.src= 'imagem-grande3.jpg' "
onMouseout="document.imagem.src= 'imagem-normal.jpg' ">

<img src="imagem-normal.jpg" name="imagem">

Figura 2: Exemplo de rollover usado para redimensionar imagens

A única diferença entre esse dois últimos, é que no primeiro é um link em forma de texto, que ao passar o mouse em cima, mostra uma imagem correspondente na parte central da página. E a segunda usa os mesmos princípios que o primeiro exemplo, apenas com a diferença que não há link, e o objeto redimensionador não é um texto, e sim uma imagem. Vale lembrar que a diferença entre usar como objeto redimensionador, uma imagem ou um text, está em que no caso da imagem, os eventos onMouseover e onMouseout estão dentro da tag img src, enquanto no caso de um texto link, esse dois eventos se encontram dentro da tag ....

Outro evento útil e interessante é o onClick ao invés do onMouseover. Dessa forma, a imagem central não será alterada quando o usuário passar o mouse sobre o objeto responsável pela ação, mas quando o mesmo clicar no objeto. Esse evento é excelente para menus. Ou, se preferir, também poderia usar o double click, ou seja, duplo clique. Esse evento deve ser representado como ondblClick. Mas o desenvolvedor web deve tomar cuidado ao usar esse evento, pois é muito pouco provável que um usuário vá se lembrar de usar o duplo clique em uma página web, evento raríssimo.

Esses quatro exemplos dados, espero eu, sejam suficientes para demonstrar de forma útil como usar o rollover em Javascript. Ele é uma das ferramentas mais essenciais do Java Script, sendo praticamente obrigatório o saber de um programador web. Sabendo usar essa ferramenta, o programador web poderá fazer om que sua página fique riquíssima em conteúdo e interatividade. Outra boa aplicação seria para substituir os antigos frames, que hoje em dia são raramente usados. Bem utilizada, suas páginas poderão ficar parecidas com eventos em flash. Nesse artigo estão apenas os tijolos e o cimento, cabe ao artista desenvolvedor web usar essa preciosa ferramenta com o máximo de sua imaginação.