[Resolvido] Cada clique alterar imagem

vanessa_souza · Março 12, 2009

Ola,

tenho duas imagens img1 e outra img2, ta aparecendo a img1, ao clicar a 1º vez aparece a imagem img2, qd clica novamente aparece a img1 e assim por diante, a cada clique altera a imagem.

desde já obrigada

iRCC · Março 12, 2009

você tem que ter o src da imagem, depois extrair somente o nome dela e depois substituir pelo próxima.

function trocaimagem(elImg){

var elImg = document.getElementById('minhaImagem'); 

//pegar o atual src 
var src = elImg.substr( elImg.lastIndexOf('/')+1 , elImg.length); 

if( src == 'nuvem.gif' ) 
{ 
   elImg.src = 'nuvemChuva.gif' 
} 
else 
{ 
   elImg.src = 'nuvem.gif'; 
} 
}

e na sua imagem no onclik você faria assim:

<img src="imagens/nuvem.gif" onClick="trocaimagem(this)" //coloco o this ali como parametro pq ele vai passar o src da imagem para a função

vanessa_souza · Março 13, 2009

Ola iRCC, não funcionou, você tem algum outro modo de fazer ou teria como você me passar o código completo, pois o meu nao ta fazendo a 2º troca.

muito obrigada

iRCC · Março 13, 2009

tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada

iRCC · Março 13, 2009

Implementei de uma forma um pouco diferente agora, espero que de certo

tag img

<img id="status" src="imagens/nuvem.gif onclick="trocaimagem(this)" />

funcção js

function trocaimagem(img) {
   
	var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
	if (src == 'nuvem1.gif') {
		img.src = 'imagens/nuvem2.gif'; // tenho que passa o img pq a referencia da imagem
	   

	} else if (src == 'nuvem2.gif') {
		img.src = 'imagens/nuvem3.gif';
		ajaxRequest("ajax.asp?img=1&origem=trocaImagem&status=3&codigo=" + codigo, vazio)

	} else if (src == 'nuvem3.gif') {
		img.src = 'imagens/nuvem1.gif';
		

	}

}

vanessa_souza · Março 13, 2009

tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada

Oi, eu sou nova fazendo script, entao primeiramente desculpe minha ignorancia. Mas como eu posso debugar o js?

iRCC · Março 13, 2009

você pelo menos tentou implementar como eu fiz na segunda vez? Esse script ali eu uso no meu sistema, e la funciona perfeitamente.

você usa o que para programar? VisualStudio?

vanessa_souza · Março 13, 2009

tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada

Oi, eu fiz desse jeito, assim não funciona, mas se eu comentar a linha ( var src = elImg.substr....) e no if substituir o src e pelo elImg, ele só altera a imagem uma vez.

você sabe o que pode ser?

Obrigada.

<html>
<head>
</head>

<body>

<img OnClick="trocar(this)" src="azul.gif" id="imagem">

<script type = "text/javascript">

function trocar(elImg)
{	
  var elImg = document.getElementById('imagem');

  //pegar o atual src
  var src = elImg.substr( elImg.lastIndexOf('/')+1 , elImg.length);

if( src == 'amarelo.gif' )
{
   elImg.src = 'azul.gif'
}
else
{
   elImg.src = 'amarelo.gif';
}

}
</script>

</body>
</html>

vanessa_souza · Março 13, 2009

você pelo menos tentou implementar como eu fiz na segunda vez? Esse script ali eu uso no meu sistema, e la funciona perfeitamente.

você usa o que para programar? VisualStudio?

Utilizo o eclipse

iRCC · Março 13, 2009

Olha só, talvez seja isto que estou pensando aqui:

Nesta linha

var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);

ele faz o seguinte: Pega o src completo da tua imagem e faz uma string começando da barra ('/'), como no seu caso o seu src é somente src="amarelo.gif" não existe barra, entendeu? e ai o js vai se perder pq nao existe uma barra no teu src, no seu caso nao precisaria do codigo acima somente armazene o src em uma variavel e veja o que acontece, ok?

Não sei se você consegui entender.

iRCC · Março 15, 2009

Bom Vanessa vou postar aqui um script que acabei de fazer:

Parte HTML

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="script/teste.js"></script>
	
	<title>Troca imagem</title>
	</head>
	
	<body>
		<form name="form1" action="#" method="post">
		  <table>
			<tr>
				<td>
					<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
				</td>
			</tr>
		  </table>  
	
		</form>
	</body>
</html>

Parte javascript

function alteraImagem(img) {
   // debugger
	var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);


	if (src == 'aguardando.gif') {
		img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
	} else { 
		img.src = 'imagens/aguardando.gif';
	}   
}

vanessa_souza · Março 16, 2009

Bom Vanessa vou postar aqui um script que acabei de fazer:

Parte HTML

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="script/teste.js"></script>
	
	<title>Troca imagem</title>
	</head>
	
	<body>
		<form name="form1" action="#" method="post">
		  <table>
			<tr>
				<td>
					<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
				</td>
			</tr>
		  </table>  
	
		</form>
	</body>
</html>

Parte javascript

function alteraImagem(img) {
   // debugger
	var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);


	if (src == 'aguardando.gif') {
		img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
	} else { 
		img.src = 'imagens/aguardando.gif';
	}   
}

vlw mesmo.

matteus · Maio 28, 2009

Bom Vanessa vou postar aqui um script que acabei de fazer:

Parte HTML

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="script/teste.js"></script>
	
	<title>Troca imagem</title>
	</head>
	
	<body>
		<form name="form1" action="#" method="post">
		  <table>
			<tr>
				<td>
					<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
				</td>
			</tr>
		  </table>  
	
		</form>
	</body>
</html>

Parte javascript

function alteraImagem(img) {
   // debugger
	var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);


	if (src == 'aguardando.gif') {
		img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
	} else { 
		img.src = 'imagens/aguardando.gif';
	}   
}

vlw mesmo.

Bom Aproveitando esse post, gostaria de saber como eu faço pra usar mais de 2 figuras digamos por 3 ou 4 e voltar para figura 1 no caso aguardando.gif

obrigado

Arquivado

[Resolvido] Cada clique alterar imagem

Recommended Posts

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

iRCC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vanessa_souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

matteus 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante