Alterando a fonte da imagem usando jQuery

764

Meu DOM fica assim:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Quando alguém clica em uma imagem, quero que a imagem src mude para <img src="imgx_off.gif">onde xrepresenta o número da imagem 1 ou 2.

Isso é possível ou eu tenho que usar CSS para alterar as imagens?

javascript jquery image user67033
fonte
Se você quer algo usando jQuery que você pode querer olhar para o Cycle Plugin jQuery, demonstração scrollRight (exemplo inferior direito)
TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
manish nautiyal
9
Você realmente deve aceitar a resposta de Jonstjohn :) O número de votos positivos na pergunta e na resposta indica que muitas pessoas já se depararam com isso. Melhoraria a questão de ter uma resposta aceita.
Xcelled
4
Até a data, ou seja 19th July, 2016 15:39 PM, a Pergunta Upvotes Count 369 e @jonstjohn Answer Upvotes Count 931 . Mas, que azar, o @OP não fez login depois Feb 17 '09 at 2:57. :(E, @jonstjohn Resposta Permanecer Unmarked .
Nana Partykar 19/07
@ Xcelled, o único problema é que a resposta de Jonstjohn não responde à pergunta. É um ponto menor, mas vale a pena fazer. Dê uma olhada na resposta da inco, pois é a única aqui que realmente responde à pergunta corretamente.
David Newcomb

Respostas:

1687

Você pode usar a função attr () do jQuery . Por exemplo, se sua imgtag tiver um idatributo 'my_image', você faria o seguinte:

<img id="my_image" src="first.jpg"/>

Em seguida, você pode alterar a srcimagem com o jQuery da seguinte maneira:

$("#my_image").attr("src","second.jpg");

Para anexar isso a um clickevento, você pode escrever:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Para girar a imagem, você pode fazer o seguinte:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
Jonstjohn
fonte
79

Um dos erros mais comuns que as pessoas cometem ao alterar a fonte da imagem não está aguardando o carregamento da imagem executar ações posteriores, como a maturação do tamanho da imagem, etc. Você precisará usar o .load()método jQuery para fazer coisas após o carregamento da imagem.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

Motivo da edição: https://stackoverflow.com/a/670433/561545

Mohsen
fonte
Sim. Isso finalmente deu certo. .destroy () não vai longe o suficiente. Nuking todo o html e que init novamente realmente funciona ao trocar imagens de vários tamanhos e tal.
Matt J.
observe que o carregamento não será acionado de maneira confiável, especialmente se a imagem estiver no cache. Veja a documentação do jQuery.
Twilite
19

Para maiores informações. Eu tento definir o atributo src com o método attr no jquery para a imagem do anúncio usando a sintaxe, por exemplo:$("#myid").attr('src', '/images/sample.gif');

Esta solução é útil e funciona, mas se alterar o caminho, altere também o caminho da imagem e não está funcionando.

Estou procurando resolver esse problema, mas não encontrei nada.

A solução é colocar o '\' no início do caminho: $("#myid").attr('src', '\images/sample.gif');

Esse truque é muito útil para mim e espero que seja útil para outros.

wphonestudio
fonte
18

SE não houver apenas jQuery ou outras estruturas de eliminação de recursos - muitos kb para download de cada vez por usuário apenas por um truque simples - mas também JavaScript nativo (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

Isso pode ser escrito de maneira geral e mais elegante:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>
inco
fonte
Sempre me surpreende quantas pessoas não conseguem ler uma pergunta e dar a resposta solicitada. Pareceu-me óbvio (e você) que a pergunta estava procurando uma solução genérica e é por isso que o OP deu dois exemplos. E, no entanto, todo mundo parecia não apenas errar totalmente, mas dar uma resposta que nem sequer respondia à pergunta. :(
David Newcomb
17

Mostrarei como alterar a imagem src, para que, quando você clicar em uma imagem, ela gire por todas as imagens que estão no seu HTML ( especificamente no seu d1ID e c1classe) ... se você tem 2 ou mais imagens no seu HTML .

Também mostrarei como limpar a página depois que o documento estiver pronto, para que apenas uma imagem seja exibida inicialmente.

O código completo

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

O colapso

  1. Crie uma cópia dos links que contêm as imagens (nota: você também pode usar o atributo href dos links para obter funcionalidades adicionais ... por exemplo, exibir o link de trabalho abaixo de cada imagem ):

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. Verifique quantas imagens estavam no HTML e crie uma variável para rastrear qual imagem está sendo mostrada:

    var $length = $images.length;
var $imgShow = 0;

  3. Modifique o HTML do documento para que apenas a primeira imagem seja exibida. Exclua todas as outras imagens.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. Vincule uma função a ser manipulada quando o link da imagem for clicado.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    O coração do código acima está sendo usado ++$imgShow % $lengthpara percorrer o objeto jQuery que contém as imagens. ++$imgShow % $lengthprimeiro aumenta nosso contador em um, depois modifica esse número com quantas imagens existem. Isso manterá o índice resultante alternando de 0para length-1, que são os índices do$images objeto. Isso significa que esse código funcionará com 2, 3, 5, 10 ou 100 imagens ... percorrendo cada imagem em ordem e reiniciando na primeira imagem quando a última imagem for alcançada.

    Além disso, .attr()é usado para obter e definir o atributo "src" das imagens. Para escolher elementos de entre o $imagesobjecto, que definida $imagescomo o contexto jQuery utilizando o formulário $(selector, context). Então eu uso .eq()para escolher apenas o elemento com o índice específico no qual estou interessado.

Exemplo de jsFiddle com 3 imagens


Você também pode armazenar os srcs em uma matriz.
Exemplo de jsFiddle com 3 imagens

E aqui está como incorporar os hrefs das tags âncora nas imagens:
exemplo jsFiddle

Peter Ajtai
fonte
17

Espero que isso possa funcionar

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});
Zeeshan
fonte
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Derek Brown
Graças Derek vai manter essa coisa em minha mente na próxima vez em diante
Zeeshan
14

Você deve adicionar o atributo id à sua tag de imagem, assim: 

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

então você pode usar este código para alterar a fonte das imagens:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
Mr Bitmap
fonte
9

Você também pode fazer isso com o jQuery desta maneira:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Você pode ter uma condição se houver vários estados para a fonte da imagem.

FernandoEscher
fonte
5
essa sintaxe não está correta. a função jquery attr () usa 1 ou 2 parâmetros. O primeiro é uma sequência com o nome do atributo HTML, o segundo é o valor para esse atributo que você deseja definir.
Thiago Silva
7

Eu tive o mesmo problema ao tentar chamar o botão re captcha. Após algumas pesquisas, agora a função abaixo funciona bem em quase todos os navegadores famosos (chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' é usado para renderizar uma nova imagem captcha e pode ser ignorado no seu caso. O ponto mais importante é gerar uma nova URL que força o FF e o IE a renderizar novamente a imagem.

Kayvan Tehrani
fonte
7

Alterar a fonte da imagem usando jQuery click()

elemento:

    <img class="letstalk btn"  src="images/chatbuble.png" />

código:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });
Abhijit Poojari
fonte
7

Caso você atualize a imagem várias vezes e ela seja CACHED e não atualizada, adicione uma sequência aleatória no final:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
kintsukuroi
fonte
1
É muito importante, pelo menos para mim, adicionar a sequência aleatória no final! Tanques!
Marcelo Sader
3

Hoje tenho a mesma maravilha, fiz dessa maneira:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
Anyone_ph
fonte
3

Esta é uma maneira garantida de fazê-lo em JavaScript Vanilla (ou simplesmente puro):

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Raymond Wachaga
fonte
1

Apenas uma adição, para torná-lo ainda mais pequeno: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Szél Lajos
fonte
-1

Não há como alterar a fonte da imagem com CSS.

A única maneira possível é usar Javascript ou qualquer biblioteca Javascript como o jQuery .

Lógica-

As imagens estão dentro de uma div e não existem classou estão idcom essa imagem.

Portanto, a lógica será selecionar os elementos dentro do local divonde as imagens estão localizadas.

Em seguida, selecione todos os elementos das imagens com loop e altere a imagem src com Javascript / jQuery .

Código de exemplo com saída de demonstração

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>
Expandir snippet

Abrar Jahin
fonte