3 de set de 2012

Efeito MouseOver em suas imagens

O efeito que trago hoje para vocês, é o efeito MouseOver, mais conhecido como o efeito "Passe o Mouse", muito usado em publicidades ou banners de parceria. Copie os códigos e cole em um objeto Html/JavaScript.

1. Mouseover - duas imagens

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>

As palavras em vermelho no código, são os locais que você irá substituir com seus endereços das imagens e links:
  • 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.

1. Mouseover - alerta de mensagem


Código:
<img id="Sua imagem" src="Endereço da imagem" onMouseOver="alert('Sua mensagem');">

As palavras em vermelho no código, são os locais que você vai substituir com os endereços das imagens e links:
  • 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
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

1 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo