Oficina da Net Logo

Criando Rollovers com JavaScript

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

Por | @jonathanlamimkt Programação Pular para comentários
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 Leia em destaque:
Os melhores salários por linguagem de programação 2018.





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

Você tem Telegram? Então inscreva-se grátis aqui no canal do Oficina da Net e recebe todas as notícias pelo mensageiro.

MAIS SOBRE:
Comentários
Carregar comentários