Publicado em 12 de mar.

ALTERAR IMAGEM AO CLICAR NELA

#javascript #css #design #desenvolvimento-frontend #html

Estou começando a aprender html/css/javascript, e estou com um projeto de um site, vou tentar explicar oq eu quero. Eu tenho 3 imagens de espelhos quebrados e quero que ao clicar em cada imagem apareça a foto dentro do espelho, porém n estou conseguindo e quando eu clico na imagem ela troca apenas de um espelho...

<!DOCTYPE html>

<html lang="pt-br">
 <head>
 <title>TE AMO</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="styles.css" />

 </head>
 <body>
<script type="text/javascript">
 function changeImage(a) {
 document.getElementById("quadro1").src=a;
 }
</script>
</div>
 <div class="momentos-menu">
 <img src="imagens/momentos.png" class="momentos">
 <div id="quadro">
 <div class="row">
 <div class="coluna">
 <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-1.png");'>
 </div>
 <div class="coluna">
 <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-2.png");'>
 </div>
 <div class="coluna">
 <img id="quadro1" src="imagens/quadro.png" onclick='changeImage("imagens/quadro-foto-3.png");'>

 </div></div>
 </div>
 </div>

 </body>
</html>

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Jack Oliveira· 12 de mar.

Tente assim

function marcar(e) {
 // verifica se a classe azul (estilo css que conter a imagem azul) esta no elemento
 if (e.className == "azul") {
 e.className = "vermelho";
 } else {
 e.className = "azul";
 }
}

.azul::after {

 content: url("img/Azul.gif");
}

.vermelho::after {

 content: url("img/cor-vermelha-30x30.jpg");
}

<div>
 <img class="azul" id="cadeira1" onclick="marcar(this)">
 <img class="azul" id="cadeira2" onclick="marcar(this)">
 <img class="azul" id="cadeira3" onclick="marcar(this)">
</div>

	 

	Veja uns exemplos [aqui de mudar imagem 01](https://www.horadecodar.com.br/2020/10/21/como-alterar-o-src-de-uma-imagem-com-javascript/)      [aqui de mudar imagem 02](http://embuscadocodigo.com/codigos/javascript/alterar-imagem-com-javascript.html)

Omar~· 12 de mar.

<img class="quadro" src="imagens/quadro.png" data-image="1" alt="" />
<img class="quadro" src="imagens/quadro.png" data-image="2" alt="" />
<img class="quadro" src="imagens/quadro.png" data-image="3" alt="" />

<script>
 var quadro = document.getElementsByClassName('quadro');

 for (var i = 0; i< quadro.length; i++) {
 quadro[i].addEventListener('click', changeImage, false);
 }

 function changeImage(e) {
 var clickAtual = e.target;
 clickAtual.src = 'imagens/quadro-foto-' + (clickAtual).dataset.image + '.png';
 }
</script>

riantrovao· 12 de mar.

4 horas atrás, Omar~ disse:

<img class="quadro" src="imagens/quadro.png" data-image="1" alt="" />
<img class="quadro" src="imagens/quadro.png" data-image="2" alt="" />
<img class="quadro" src="imagens/quadro.png" data-image="3" alt="" />

<script>
 var quadro = document.getElementsByClassName('quadro');

 for (var i = 0; i< quadro.length; i++) {
 quadro[i].addEventListener('click', changeImage, false);
 }

 function changeImage(e) {
 var clickAtual = e.target;
 clickAtual.src = 'imagens/quadro-foto-' + (clickAtual).dataset.image + '.png';
 }
</script>

  

	Funcionou perfeitamente , agora gostaria de saber como faço para botar um efeito mais smooth, se puder me ajudar eu agradeço