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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.