Como fazer links que mudam a imagem

Hoje vou ensinar como criar links com imagens que mudam quando colocam o cursor em cima. Acho que deve existir um modo mais fácil... mas esse é o modo que sei fazer e por isso vou ensinar aqui. Veja um exemplo abaixo:

Legal né? e você pode fazer isso com qualquer imagem, até com os ícones. Então, se quiser aprender, siga os passos abaixo.

1. hospede as imagens e copie o link delas. Se você não sabe como e onde hospedar uma imagem, clique aqui.

2. Copie, cole e faça as seguintes alterações no código abaixo:

<a href="URL de Redirecionamento"><img src="PRIMEIRA IMAGEM" onmouseover="this.src='SEGUNDA IMAGEM'" onmouseout="this.src='PRIMEIRA IMAGEM'" /></a><a href="LINK"><img onmouseout="this.src='PRIMEIRA IMAGEM'" onmouseover="this.src='SEGUNDA IMAGEM'" src="PRIMEIRA IMAGEM" /></a>

URL de redirecionamento: Escreva o link que vai abri após clicar
Primeira Imagem: link da primeira imagem que você quer que apareça
Segunda Imagem: link da imagem que aparecerá ao ser colocado o mouse em cima.


3. Copie e cole o código abaixo, no local que você quer que apareça esse link de imagem que muda.

Se você quer que apareça em um post específico, cole na versão HTML do post, como mostra na imagem abaixo, e faça as mudanças necessárias.

No caso do ser ícones, e você preferir colocar na barra lateral do blogger, vá para o painel do blogger > Layout > Adicionar um novo Gadget > HTML/JavaScript. Cole o código.

Pronto.