Muitas efeitos interessantes podem ser construídos a partir da propriedade Mouseover, ou melhor dizendo quando voce passa o mouse sobre uma imagem. Neste artigo aprenderemos como colocar uma imagem (Imagem 1) e quando passar o mouse por cima aparecer outra (Imagem 2), muito simples, vamos desvendar o código.
Primeiramente, voce pode utilizar este código em qualquer lugar, seja em uma widget (De link-me por exemplo) ou dentro de uma postagem.
Para a utilização basta copiar o código abaixo:
<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>
Modifique as seguintes propriedades:
ENDEREÇO-DO-LINK: Este será o link para onde redirecionará quando a imagem for clicada.
ENDEREÇO-DA-IMAGEM-1: Este deve ser o link de onde se encontra a imagem 1, a principal.
ENDEREÇO-DA-IMAGEM-2: Este deve ser o link da imagem 2, a qual deverá aparecer ao passar o mouse por cima.
Depois iremos ver no proximo artigo como aplicar opacidade com a propriedade mouseover:
Efeito opacidade sobre imagens mouseover
E como usar o efeito mouseover para ícones de redes sociais que sobem ao passar o mouse:
Widget redes sociais aparecem com mouseover
Efeito opacidade sobre imagens mouseover
E como usar o efeito mouseover para ícones de redes sociais que sobem ao passar o mouse:
Widget redes sociais aparecem com mouseover
Exemplo,passe o mouse sobre a imagem.
Bacharel em Ciência da Computação pela UFMA e atualmente trabalhando como analista desenvolvedor C#. Programador PHP com foco em Back-End.
Coloque aqui o seu email