06/09/2021

Como colocar imagem que se transforma em outra ao passar o mouse

Como colocar imagem que se transforma em outra ao passar o mouse

Já publiquei vários macetes relacionados com imagens porém, este é muito interessante pois você simplesmente move o cursor sobre a imagem para abrir uma outra imagem em seu lugar.
O mais interessante neste código é que ele é pequeno e você pode colocá-lo diretamente na área de postagem.

Para o exemplo abaixo eu utilizei dois wallpapers em tamanho reduzido. Passe o mouse sobre a imagem e você verá a transformação.

Pode acontecer da imagem ser muito pesada e por isso, demorar um pouco para abrir a segunda imagem. Por isso é muito importante que as imagens utilizadas sejam mais leves e menores.



O código utilizado para isso está abaixo.
---------------------------------------------------------------

<img src="URL da imagem UM" onmouseover="this.src='URL da imagem DOIS';" onmouseout="this.src='URL da imagem UM';"/>

---------------------------------------------------------------

Veja a simplicidade do código. O endereço (URL) da imagem UM é colocada nas áreas em vermelho e o endereço da imagem DOIS é colocada na área em azul.

Espero que tenham gostado e até a próxima.




Se você se considera uma pessoa acanhada, com poucos amigos, sem prestígio, sem dinheiro suficiente, que não sabe falar corretamente, sem postura física e, principalmente, que se sente excluído da sociedade, este curso é para você!

Nenhum comentário:

Postar um comentário

Faça comentários somente sobre o assunto do Post.
Não use palavras impróprias.

Veja também