Mudando a img quando clicamos nela

[Rafael Rocha 0]

Pessoa, estou com a seguinte duvida:

 

No meu site há varias imagens na tela, quando eu clico em uma delas, eu quero q essas imgs mudem, ou seja, tenho a imagem X1 e Z1, quando eu clico na imagem X1, ela muda para a imagem X2 e se eu clicar de novo nela ela muda para a X1 de novo, estou tentando fazer da seguinte forma:

 

<script>

function mudaImagem(nomeDiv,nomeImg){

		if(typeof variavel == 'undefined'){
			variavel ="2";
			document.getElementById(nomeDiv).innerHTML="<img src='img/profile/"+nomeImg+"2.png' border='0'>"
		} else {
			if(variavel+nomeImg!="2"){
				variavel ="2"
				document.getElementById(nomeDiv).innerHTML="<img src='img/profile/"+nomeImg+"2.png' border='0'>"
			}else{
				variavel ="1"
				document.getElementById(nomeDiv).innerHTML="<img src='img/profile/"+nomeImg+".png' border='0'>"
			}
		}
}

</script>


<a href=javascript: onclick="mudaImagem('ImgMenuAccountInfo','accountInfo');"><span id="ImgMenuAccountInfo"> <img src="img/profile/accountInfo.png" border="0"></span> </a>

Só q isso nao da certo, se fosse só uma imagem na página até daria certo.

Tipo eu estou setando a variavel "variavel" com 1 ou 2 para saber qual img eu coloco, + como são 2 imagens na pagina, a variável se "confunde" quando clico em uma e dps em outra.

 

Resumindo

 

Tenho N imagens em uma página quando clicar em alguma gostaria q ela mudasse, porem a do lado continuasse a memso. E se eu clicar de novo na mesma ela votasse para a q estava antes

 

Bom fico confuso + é isso aee

abracos

[Henrique Barcelos 290]

Como está o HTML das outras imagens?

 

Será q você não está usando o msm ID para 2 imagens diferentes?

 

Se você tem vários lugares onde isso ocorre, precisará de um array de imagens para cada um...

 

Supondo assim:

<img src="imagem01-A.jpg" id="imagem1" alt=""/>
<img src="imagem02-A.jpg" id="imagem2" alt=""/>
<img src="imagem03-A.jpg" id="imagem3" alt=""/>

No Javascript faça:

var img1 = document.getElementById("imagem1");
var img2 = document.getElementById("imagem2");
var img3 = document.getElementById("imagem3");

var atual1 = 0;
var atual2 = 0;
var atual3 = 0;

var array1 = new Array();
var array2 = new Array();
var array3 = new Array();

array1[0] = "imagem01-A.jpg";
array1[1] = "imagem01-B.jpg";

array2[0] = "imagem02-A.jpg";
array2[1] = "imagem02-B.jpg";

array3[0] = "imagem03-A.jpg";
array3[1] = "imagem03-B.jpg";

img1.onclick = function(){
	atual1 = atual1 == 0 ? 1 : 0;
	this.src = array1[indice];
}

img2.onclick = function(){
	atual2 = atual2 == 0 ? 1 : 0;
	this.src = array2[indice];
}

img3.onclick = function(){
 	atual3 = atual3 == 0 ? 1 : 0;
 	this.src = array3[indice];
 }

A idéia é essa, agora é só adaptar ;]