Javascript --> mudar src de uma image

T

Tactical

Membro
Boa Tarde,

tou a fazer um site e precisava de botoes, tou a usar image (nao input type=imagefield), mas nesses botoes eu precisava k onclick trocasse a imagem, ou seja, se tivesse a imagem "on.gif" ficasse "off.gif", e se voltasse a clicar voltava a "on.gif".

ja fiz algumas tentativas e neste momento tá assim:

<html>
<head>
<script type="text/javascript">
function changeSrc(id)
{
var imagem=document.getElementById("id");
if(imagem.src=="botoes/off.jpg"){
imagem.src="botoes/on.jpg";
}
else{
imagem.src="botoes/off.jpg";
}
}
</script>
</head>
<body>
<img id="botao" src="botoes/off.jpg" onclick="changeSrc('botao')" width="107" height="98" />
<br /><br />
</body>
</html>


Porke nao funciona? como é k tem de ficar?


Obrigado
 
Última edição:
em vez de :
Código: 
var imagem=document.getElementById([COLOR="DarkRed"]"[/COLOR]id[COLOR="DarkRed"]"[/COLOR]);

experimenta:
Código: 
var imagem=document.getElementById(id);


e também:
Código: 
onclick="changeSrc('botao')[COLOR="DarkRed"];[/COLOR]"

e já agora: FireFox Javascript debugger
 
Última edição:
resultou! eu ja tinha tentado sem as aspas no getElementById("id"), mas tb nao tinha resultado, mas agora descobri pk.

o problema tava nesta comparaçao:

Código: 
       if(imagem.src=="botoes/off.jpg")

tenho k comparar assim:

Código: 
if(imagem.src=="http://casa/domotica2_v2/botoes/off.jpg")

com o endereço completo, o k nao dá geito nenhum, em caso de colocar num servidor ou noutro pc o endereço ja nao vai ser esse e tenho de mudar em todo lado k aparecer esta comparação.

sabes como resolvo esse problema sem ter se comparar com o endereço completo?


de qualquer modo ja desenrasca na falta de melhor soluçao ;)
Obrigado
 
Apesar do tópico ser um pouco antigo, estou postando o código certo para poder ajudar aqueles que assim como eu que procuraram algo do tipo no google e cairam nessa página..

função js:
Código: 
function changeSrc(id) {
    var imagem=document.getElementById(id);
    if(imagem.alt == "Abrir"){
        imagem.src = "imagens/open.gif";
        imagem.alt = "Fechar";
    }
    else {
        imagem.src = "imagens/folder.gif";
        imagem.alt = "Abrir";
    }
}
e no HTML assim:
Código: 
<a href="#" onclick="changeSrc('p-a1');"><img id="p-a1" alt="Abrir" src="imagens/folder.gif">Link</a>
ou:
Código: 
<img id="botao" alt="Abrir" src="botoes/off.jpg" onclick="changeSrc('botao')" width="107" height="98" />
Abraços, espero ter ajudado.
 
Está muito interessante.
Fiz algo parecido, mas este aqui ainda está melhor.

Contudo tenho aqui um desafio, que é adicionar mais uma 2 funcionalidades.
1º a alteração ficar guardada e passado 20 horas esse botão alterava sozinho para a imagem padrão (on.gif por exemplo)


Alguém pode ajudar?
 
Última edição:
Se queres esse comportamento por utilizador, podes guardar a data num cookie e comparas com a data atual para decidir o que mostrar. Se for um comportamento global tens de guardar essa data no servidor (num ficheiro, numa base de dados...).
 
nfk disse:
Se queres esse comportamento por utilizador, podes guardar a data num cookie e comparas com a data atual para decidir o que mostrar. Se for um comportamento global tens de guardar essa data no servidor (num ficheiro, numa base de dados...).
Clicar para expandir...
numa base de dados seria uma boa hipotese.
Alguma sugestão para comparar essas datas?
 
dmcunha disse:
Alguma sugestão para comparar essas datas?
Clicar para expandir...

http://stackoverflow.com/questions/492994/compare-two-dates-with-javascript

Comparar datas é uma tarefa muito comum, é só procurares na Internet. Pode haver subtilezas como time zones, e convém ter cuidado com os formatos que se usa para evitar problemas, o melhor é usar soluções já existentes e testadas. No teu caso é mais simples porque não é o utilizador que introduz a data, é sempre gerada pelo teu código.
 
Atenção que da forma que estás a fazer vais ter uma memory leak daquelas "tradicionais" do Javascript ;)

Se não tiveres a lidar com imagens grandes ou a troca das mesmas seja reduzida, não te preocupes. Se for algo mais intensivo... já foste.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo