quarta-feira, 9 de março de 2016

HTML: Mudando imagens ao passar o mouse.

Lá venho eu novamente com nosso tutorial HTML básico para o Blog.
Acho que vou fazendo alguns posts ao longo do tempo haha..
Hoje venho ensinar fazer esse efeito (passe o mouse em cima da imagem):



Você precisará de duas imagens diferentes uma da outra. No caso usei essas duas:

Bom, primeiramente faça o upload de duas imagens em seu blog. Depois copie o endereço delas. Como copia o endereço? Bem, insira elas na postagem, em modo de escrever mesmo e clique em cima dela com o botão direito do mouse e clique em copiar endereço da imagem. Dessa forma:


Guarde os dois endereços.. os meus são:
https://4.bp.blogspot.com/-vqZ5Y33moCI/VuAGaC_WFGI/AAAAAAAABxE/nH4uEXjSRDg/s1600/imgem1.png

https://4.bp.blogspot.com/-k5SxQMjGgM0/VuAGaO8_f3I/AAAAAAAABxE/BNZDUuUBiFg/s1600/imgem2.png

Agora você vai usar a seguinte TAG:

<img src="endereço da imagem1onmouseout="this.src='endereço da imagem1';" onmouseover="this.src='endereço da imgem2';"  />

Preste atenção pois as partes em vermelho não podem ser modificadas. Tem que estar exatamente dessa forma.. aspas simples, duplas, pontos.. tudo da mesma forma. Agora vou explicar o que é cada coisa:
<img : Início de toda tag que representa uma imagem.
src: atributo que você informa o endereço da imagem
onmouseout : função que significa "quando sair o mouse". o this.src quer dizer mudar o src para o endereço informado.
onmouseover: função que significa "quando o mouse estiver sobre". o this.src tem o mesmo significado da função anterior.

Basta então você substuir os endereços, copiar a tag e colar no HTML do post ou no gadget "HTML/JavaScript".


Obs.: Caso queira que ao clicar na imagem encaminhe para um link, basta usar a tag de link que expliquei no post anterior:

<a href="endereçotarget="_blank"> <img src="endereço da imagem1onmouseout="this.src='endereço da imagem1';" onmouseover="this.src='endereço da imgem2';"  /> </a>

Me conte se conseguirem fazer!


3 comentários:

  1. eeeeeeeeeeeeee
    vou tentar fazer,depois de conto,mas com passo a passo assim é mais fácil né?hahahahahaa
    bjos

    ResponderExcluir
  2. Você explica tão bem! Eu adorava html quando estudava processamento de dados, mas esqueci um monte de coisas já! Esse tutorial ficou ótimo!

    Bjs!

    ResponderExcluir
  3. Ai que gracinha!
    O dia que eu quiser fazer algo assim volto aqui pra fazer junto com seu tutorial! ^^
    bjin

    http://monevenzel.blogspot.com.br/

    ResponderExcluir