Alterando a fonte da imagem usando jQuery

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?

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);
    }
});

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

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.

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>

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

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;
        }
    });
});

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" });
    });

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.

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.

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);
        }
    });

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());

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');  
});

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

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

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');
});

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>