7 replies to this topic

[Rafael Rocha]

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

[Feko]

Bom, se for o que compreendi, isso deve ajudar:

<script type="text/javascript">
function swapImg(img,src1,src2){
        if(img.src==src1){
                img.src=src2;
        }else{
                img.src=src1;
        }
}

</script>

Aí, nas tags IMG, você coloca:

<img src="imagens/peixe1.jpg" alt="" onclick="swapImg(this,'imagens/peixe1.jpg','imagens/peixe2.jpg')" />
<img src="imagens/casa1.jpg" alt="" onclick="swapImg(this,'imagens/casa1.jpg','imagens/casa2.jpg')" />

Resumindo, dentro do onclick, você passa primeiro this (Palavra reservada, sem aspas), depois o endereço da primeira imagem (Entre aspas simples), e depois, o endereço da segunda imagem (Também entre aspas simples).

Testado em Firefox 3.5

[Rafael Rocha]

fiz isso como me indicou só q esta dando erro.
quando clico na img uma vez ela muda + quando eu clico nea de novo ela nao esta voltando apra a img anterior, continua na mesma...
tem alguma ideia do q possa ser?
Abs

[Feko]

Poste seu código, vamos ver.
Aqui funcionou normalmente, qual browser você usou?

[Rafael Rocha]

entao,
postei a página no seguinte endereço:

http://www.rafarocha...teste/index.php

a ideia é quando clica em ACCOUNT INFO que esta em cinza, abra uma aba e a img do ACCOUNT INFO mude, em vez de cinza fica preto (até ai tudo bom), + quando clica de novo em ACCOUNT INFO a aba sobe e a img volta a ficar cinza, so q essa segunda etapa nao ocorre, ela continua em preto..
, pq a img nao esta mudando,
vle galera

[Feko]

Que burro eu -.-

Esqueci que a função compara com o src da imagem, e o src da imagem sempre vai retornar o caminho estático, e não relativo.

<img src="http://www.rafarocha.com.br/teste/img/profile/accountInfo.png" alt="" onclick="swapImg(this,'http://www.rafarocha.com.br/teste/img/profile/accountInfo.png','http://www.rafarocha.com.br/teste/img/profile/accountInfo2.png')" />

Isso deve funcionar.
Existem diversas maneiras de fazer isso, algumas usam caminho relativo da imagem, outras não. Melhore a funçãozinha para que ela se adapte às suas necessidades

[Rafael Rocha]

opaaaa
show de bola, funcionou perfeitamente, otima essa sua função ela é perfeita, só q eu senti q vc resolveu meu problema muito rapido, ai nao tem graça, posso passar uma questao + complicada??? hehehehehhe (na verdade eu acho q é + complicado)
bom vamos lá, da uma olhada no memso endereço:

http://www.rafarocha...teste/index.php

esta funcionando perfeitamente, quando clica em ACCOUNT INFO ele fica preto e a aba aparece, quando clica de novo ele fica cinza e a aba some.. bom até ai tudo bem, + a quetao é o seguite:
quando vc clica uma vez e ele fica preto e rapidamente (antes da aba aparecer por inteira) vc clica de novo, o ACCOUNT INFO volta fica cinza, antes memso da aba aparecer por completa isso nao pode ocorrer, tipo, ele fica preto quando a aba esta aberta e cinza para dizer q esta fecha... tem como resolver isso? eu pensei na seguinte forma:
quanda a pessoa da o primeirro clik, eu desabilito o link da img por 1 segundo (1 segundo pq eh o tepo q demora para a aba aparecer por inteira) ai dps eu volto com a link.. so q eu nao faco ideia de como fazer isso Ahuahuahuah nem sei se essa é a melhor forma,andei pesquisando na net e descobri uma funcao chamada settimeout só q nao faco a menor ideia se ela é ideal para usar ou nao e tb nao sei aplica-la ao meu codigo...
bom fico no aguarde de uma maozinha sua..
vlw cara mt obrigado...

[Rafael Rocha]

Fala galera,
bomestou tentando fazer da seguinte forma:


function swapImg(img,src1,src2){
if(img.src==src1){
img.src=src2;
}else{
img.src=src1;
}

img.onclick = "";
window.setTimeout(function () {
img.onclick = "alert('http://forum.wmonline.com.br')";
}, 1000)
}


ou seja com setTimeout, só q nao funciona, estou fazendo como teste apenas um alert e nada, alguem tem alguma ideia?