imagem muda ao clicar e ao passar mouse

Esse tutorial é muito fácil! vou deixar o código abaixo e o texto destacado você muda pela imagem desejada

preview:

Código:

<img src="http://i.imgur.com/81qVmdo.gif" onclick="this.src='http://i.imgur.com/HEvIOYP.gif'" />

Fiz com checkbox!
(cuidado para não remover as aspas '")

Para colocar a imagem que muda ao passar o mouse, após a aspa ( " ) você coloca esse código:
onmouseout="this.src='URL DA IMG QUANDO O MOUSE ESTÁ FORA DELA'"
onmouseover="this.src=' URL DA IMG QUANDO O MOUSE ESTÁ SOBRE ELA '"