Criando Rollovers com JavaScript

ROLLOVER é um efeito de troca de imagens ao passar com o mouse sobre a imagem.

Por | @jonathanlamimkt Programação
Para entender melhor a aplicação dos rollovers, digite o código abaixo no bloco de notas e salve como rollovers.html.



   Meu Primeiro Rollover em JavaScript


Meu Primeiro Rollover em JavaScript


Criando Rollovers com JavaScript





Obs.: No parâmetro SRC você deve indicar o local onde se encontra a imagem que você irá utilizar.

Quando o ponteiro do mouse passar sobre a imagem ela deverá ser trocada e quando for retirado da figura deverá voltar a apresentar a imagem anterior.

É importante lembrar que as imagens não aceitam os handlers de evento “ONMOUSEOVER” e “ONMOUSEOUT”. Sendo assim, as imagens terão que ser colocadas dentro de um link, que aceitam os handlers.

Abra o código digitado acima e acrescente a ele as linhas em negrito do código abaixo.



   Meu Primeiro Rollover em JavaScript


Meu Primeiro Rollover em JavaScript


onmouseover = "document.bart.src = '../../../homer.jpg';"
onmouseout = "document.bart.src = '../../../bart.jpg';">
Criando Rollovers com JavaScript





Note que as imagens são diferentes para cada um dos handlers.

Assim concluímos a criação de rollovers, viram como é fácil?!

Até a próxima...

Mais sobre:
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários