Ola pessoal estou aprendendo JS estou praticando com os exercícios do curso, tentei aplicar um efeito conjunto em uma imagem, já que conclui o curso de CSS básico e aprendi a aplicar o efeito de hover entre outros efeitos e tentei aplicar um efeito utilizando JS e CSS ao mesmo tempo, mas estou tento um problema que não estou conseguindo ver o erro no código.
estou trabalhando com 3 imagens! a 1º para efeito transparente , a 2º para efeito em destaque e a 3º mudança para imagem cor Verde. a ideia era, ao passar o mouse a imagem 1 que é transparente vai ficar em destaque tornando-se a imagem 2 pois é um efeito hover e ao clicar sobre a imagem ela ficaria verde, tornando-se a imagem 3 indicando sua seleção, o problema que estou tendo com o JS é que ao clicar a imagem modifica sua cor para verde como desejado, mas ao retirar o mouse sobre a imagem ela retorna para a imagem 1 no caso a imagem transparente, sendo que gostaria que ela ao ser clicada ficasse verde, segue o código abaixo .Obrigado pela atenção pessoal.
<br>
<br>
<br>
<br>
<!-- Código abaixo-->
img src="img/muitosatisfeito/1muitosatisfeito.png" alt="Estou Satisfeito" align="center" border="0"
onmouseover="this.src='img/muitosatisfeito/2muitosatisfeito.png'"
onclick="this.src='img/muitosatisfeito/3muitosatisfeito.png'"
onmouseout="this.src='img/muitosatisfeito/1muitosatisfeito.png'"
