Ir ao conteúdo

Posts recomendados

Postado

Eae galera beleza, 

 

 É o seguinte estou com uma duvida, estava tentando fazer com que uma imagem muda-se para outra ao clicar nela, então pesquisei e achei a função onclick do javascript, mas o que eu consegui foi que quando clicado na imagem ela muda-se para outra, porém não consegui achar um método para que quando clica-se novamente na imagem ela volta-se a ser a mesma e assim por diante ou seja ir alternado de uma para outra, deixei o código abaixo.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>teste_img</title>
    <script type="text/javascript">
        function MudaImg(){
        document.getElementById("img").src = "ico-2.png";
        }
    </script>
    <style media="screen">
      img{
        width:100px;
      }
    </style>
  </head>
  <body>
      <img src="ico.png" id="img" onclick="MudaImg()">
  </body>
</html>

Eu preciso que ao clicar na imagem novamente el volte para imagem "ico.png", se puderem ajudar agradeço.

Postado

É muito simples, apenas crie uma variável para controlar quando está ativo ou inativo.

 

<script type="text/javascript">
	var ControleImagem = 0;
	function MudaImg()
	{
		if(ControleImagem == 0)
		{
			document.getElementById("img").src = "ico-2.png";
			ControleImagem = 1;
		}
		else if(ControleImagem == 1)
		{
			document.getElementById("img").src = "ico.png";
			ControleImagem = 0;
		}
	}
</script>

Caso tenha dúvidas, fique a vontade para me perguntar  pelo fórum mesmo.

  • Curtir 1
  • Moderador
Postado

@Danilo Henriq

Olá,  você não necessariamente precisa criar uma função ou evento de onclick.

Podes usar o jQuery, que na minha opinião, além de ser mais elegante, é mais fácil de fazer.

 

Veja o exemplo:

HTML:

<img src="https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png" id="img">

jQuery:

$(document).ready(function(){
    var img = $("#img");
    
    img.on('click', function(){
      var src = ($(this).attr("src") === "https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png") ? 
                                         "https://icon-icons.com/icons2/478/PNG/128/facebook_47004.png" : 
                                         "https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png";
   
        $(this).attr("src", src);     
    });
});

Basicamente, o que foi feito é o seguinte:

Criamos uma variável para pegar o nome do elemento.

Com esta variável, atribuímos o evento de "click".

 

Dentro deste evento, foi criada outra variável para armazenar o valor src, com uma condição de IF Ternário. 

Ou seja o IF ternário, resume em apenas uma linha a cadeia de IF normal.

A sintaxe é a seguinte:

   

  

variavel = (condição) ? "valor1" : "valor2";

Essse IF é a mesma coisa que:

if(condicao){
   "valor1";
}else{
   "valor2";
}

Basicamente é isso.

 

Veja o exemplo funcionando: https://jsfiddle.net/dife/qawpmja2/1/

 

Clique quantas vezes quiser na imagem... vai sempre ficar alterando entre as duas que foi definida.

  • Curtir 1
Postado

Complementando um pouco mais, quando se trabalha com javascript, toda a interação deve ser feita manualmente. Explicando melhor, vamos supor que você criou um método para alterar a cor de um texto ao clicar sobre ele, para a cor voltar normal quando clicado novamente , você precisa ou criar um novo método, ou no método já criado, fazer alguma função que retorne a cor inicial. É um erro muito comum quando estamos iniciando na programação. Um exemplo é  validação de um campo num formulário. Foi criado um método para validar e-mail. O usuário digitou um e-mail inválido e o campo ficou com bordas vermelhas, mas aí, com essa validação, o usuário digitou um e-mail válido mas o campo continua com bordas vermelhas. Então, é preciso criar um outro método para que quando o e-mail seja válido, o campo tenha algum aviso de sucesso ou simplesmente remova  as bordas vermelhas. Mesma coisa se aplica nesse da imagem, foi criado um método para ao clicar, a imagem fosse trocada, porém, deve-se ser feita outra chamada em javascript para que quando seja clicada novamente, a imagem original seja recolocada. 

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!