O efeito MouseOver é popularmente conhecido como o efeito "Passe o Mouse" , muito usado em publicidades ou banners. Sem mais nem menos vamos ao código.
1. Mouseover - imagem após imagem
Código:
2. Mouseover - Alerta de mensagem
Código:
Demo:
1. Mouseover - imagem após imagem
Código:
<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>
Legenda:
- Endereço do Link - aonde você deve colocar o link de alguma página da web que a imagem irá redirecionar caso seja clicado;
- Endereço da Imagem 1 - aonde você deve colocar a imagem que da inicio ao mouseover;
- Endereço da Imagem 2 - link da imagem que da continuidade ao passar o mouse por cima da imagem 1;
- Endereço da Imagem 1 (fim do código) - link da imagem 1, tendo assim que finaliza e reinicia o efeito "Mouseover";
- Border - Coloque a espessura da borda do efeito.
Código:
Legenda<img id="Sua imagem" src="Endereço da imagem" onMouseOver="alert('Sua mensagem');">
- Sua imagem - Coloque o nome de sua imagem
- Endereço da imagem - Coloque o endereço da imagem (link)
- Sua mensagem - Coloque a mensagem que irá aparecer após você passar o mouse sobre a imagem
Demo:
