6 de out de 2012

Hey, dudes :) What's up?

Hoje vou ensinar duas coisas em um só post. São super úteis:

1 - Imagem que muda ao clique
2 - Imagem que muda ao passar o mouse

Eu finalmente encontrei os códigos para essas duas imagens, acabei deixando em um pendrive que tinha certeza de ter perdido. Já coloquei os códigos na minha conta no pastebin, então não vou perdê-los novamente (não sei de onde os tirei, infelizmente).
Bom, vamos começar?

1 - Imagem que muda ao clique

Escolha duas imagens, eu recomendo que as duas sejam do mesmo tamanho. Saiba a ordem que quer que elas estejam. Eu, por exemplo, vou usar essas encontradas no We Heart It:



Agora pegue o código:

<img border="0" onclick="this.src='URL DA IMAGEM 2 AQUI'" src="URL DA IMAGEM 1 AQUI" />

Edite o código dessa forma: URL da Imagem 2 será a segunda imagem, ou seja, a imagem que irá aparecer após o clique. URL da Imagem 1 é a primeira imagem (a imagem antes do clique).

Resultado:


2 - Imagem que muda ao passar o mouse

Primeiro escolha as imagens e certifique-se de que possuem as mesmas dimensões. Eu usarei essas duas encontradas no google:




Depois que selecionar as imagens, copie esse código:

<img src="URL da Primeira Imagem" onMouseOver="this.src='URL da Segunda Imagem'" onMouseOut="this.src='URL da Primeira Imagem'" />


Em URL da Primeira Imagem deve-se colocar o link da imagem que aparecerá sem passar o mouse (como uma imagem qualquer). Em URL da Segunda Imagem coloque o link da imagem que aparecerá ao passar o mouse. Em URL da Primeira Imagem você coloca novamente o link da imagem que aparecerá sem passar o mouse.

Resultado:


Pronto: os dois tipos de imagem estão finalizados.

Espero que tenham entendido e que tenha sido útil.
Beijos,

Mrs. Nightshade.

2 comentários:

  1. Amei o blog!
    Visita o meu também!

    csn-carolina.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, anjo! Visitei e já estou seguindo! Muito lindo, amei!
      Se puder visitar também Mrs-Nightshade eu agradeço.
      Beijos!

      Excluir