Imagem muda ao passar o mouse

Olá!!! Como vai?!

Estou trazendo neste post um tutorial bem bacana que atualmente utilizo no primeiro Gadget aqui do blog que é o efeito onMouseOver

O efeito onMouseOver é um efeito que quando passa o mouse na imagem aparece outra. Confira o exemplo:

  

O código é esse:

<img src="URl da IMAGEM 1" onMouseOver="this.src='URL da IMAGEM 2'" onMouseOut="this.src='URL da IMAGEM 1 novamente'" />

Se caso você queira colocar a imagem com o efeito em um gadget como eu faço aqui no Blog, é só adicionar width="180" (o número varia de acordo com o tamanho que você quer que a imagem fique) depois do url de cada imagem. Ficando assim;

<img src="URl da IMAGEM 1"width="180" onMouseOver="this.src='URL da IMAGEM 2'" width="180" onMouseOut="this.src='URL da IMAGEM 1 novamente'" width="180"/>

 Espero que tenham gostado da tudo!  Isso é tudo pessoal ;D