1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Javascript --> mudar src de uma image

Discussão em 'Web Development' iniciada por Tactical, 20 de Novembro de 2006. (Respostas: 8; Visualizações: 20600)

  1. 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: 20 de Novembro de 2006
  2. SoundSurfer

    SoundSurfer Power Member

    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: 20 de Novembro de 2006
  3. 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
     
  4. 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.
     
  5. dmcunha

    dmcunha Power Member

    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: 16 de Outubro de 2015
  6. nfk

    nfk Power Member

    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...).
     
  7. dmcunha

    dmcunha Power Member

    numa base de dados seria uma boa hipotese.
    Alguma sugestão para comparar essas datas?
     
  8. nfk

    nfk Power Member

    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.
     
  9. jatbas

    jatbas Power Member

    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.
     

Partilhar esta Página