Modifica della fonte dell'immagine usando jQuery

764

Il mio DOM è simile al seguente:

<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 qualcuno fa clic su un'immagine, voglio che l'immagine src cambi nel punto in <img src="imgx_off.gif">cui xrappresenta l'immagine numero 1 o 2.

È possibile o devo usare i CSS per cambiare le immagini?

javascript  jquery  image 
— user67033
fonte
Se vuoi qualcosa usando jQuery potresti dare un'occhiata al plug-in Cycle jQuery, demo scrollRight (esempio in basso a destra)
— TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
— ingenua virilità
9
Dovresti davvero accettare la risposta di Jonstjohn :) Il numero di voti sia sulla domanda che sulla risposta indica che molte persone si sono imbattute in questo. Migliorerebbe la domanda per avere una risposta accettata.
— Xcelled
4
Fino alla data, vale a dire 19th July, 2016 15:39 PM, i voti positivi delle domande contano 369 e @jonstjohn rispondi ai voti positivi conta 931 . Ma, una brutta fortuna, @OP non ha effettuato l'accesso dopo Feb 17 '09 at 2:57. :(E, @jonstjohn, la risposta rimane non contrassegnata .
— Nana Partykar,
@Xcelled, l'unico problema è che la risposta di jonstjohn non risponde alla domanda. È un punto minore ma vale la pena di essere menzionato. Dai un'occhiata alla risposta di Inco in quanto è l'unica qui che in realtà risponde correttamente alla domanda.
— David Newcomb,

Risposte:

1687

È possibile utilizzare la funzione attr () di jQuery . Ad esempio, se il tuo imgtag ha un idattributo di "my_image", dovresti farlo:

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

Quindi puoi cambiare l' srcimmagine della tua immagine con jQuery in questo modo:

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

Per allegare questo a un clickevento, puoi scrivere:

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

Per ruotare l'immagine, puoi fare questo:

$('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

Uno degli errori comuni che le persone commettono quando si cambia la sorgente dell'immagine non è in attesa che il caricamento dell'immagine esegua azioni come la maturazione delle dimensioni dell'immagine, ecc. Sarà necessario utilizzare il .load()metodo jQuery per eseguire operazioni dopo il caricamento dell'immagine.

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

});

Motivo della modifica: https://stackoverflow.com/a/670433/561545

— Mohsen
fonte
Sì. Alla fine questo ha funzionato. .destroy () non va abbastanza lontano. Nuking tutto l'html e di nuovo init funziona effettivamente quando si scambiano immagini di varie dimensioni e simili.
— Matt J.
si noti che il caricamento non si attiverà in modo affidabile, soprattutto se l'immagine si trova nella cache. Vedi la documentazione di jQuery.
— Twilite,
19

Per maggiori informazioni. Provo a impostare l'attributo src con il metodo attr in jquery per l'immagine dell'annuncio usando ad esempio la sintassi:$("#myid").attr('src', '/images/sample.gif');

Questa soluzione è utile e funziona ma se si modifica il percorso cambia anche il percorso dell'immagine e non funziona.

Ho cercato di risolvere questo problema ma non ho trovato nulla.

La soluzione sta mettendo "\" all'inizio del percorso: $("#myid").attr('src', '\images/sample.gif');

Questo trucco è molto utile per me e spero che sia utile per gli altri.

— wphonestudio
fonte
18

SE non ci sono solo jQuery o altri framework di uccisione delle risorse - molti KB da scaricare ogni volta da ciascun utente solo per un semplice trucco - ma anche 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';">

Questo può essere scritto in modo generale e più 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
Mi sorprende sempre quante persone non riescono a leggere una domanda e dare la risposta richiesta. Mi è sembrato ovvio (e tu) che la domanda era alla ricerca di una soluzione generica, motivo per cui l'OP ha fornito 2 esempi. Eppure a tutti gli altri sembrava non solo mancare del tutto, ma dare una risposta che non rispondeva nemmeno alla domanda. :(
— David Newcomb,
17

Ti mostrerò come cambiare l'immagine src, in modo che quando fai clic su un'immagine ruoti attraverso tutte le immagini che sono nel tuo HTML (nel tuo d1ID e c1classe in particolare) ... se hai 2 o più immagini nel tuo HTML .

Ti mostrerò anche come ripulire la pagina dopo che il documento è pronto, in modo che inizialmente venga visualizzata solo un'immagine.

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

    });
});

La rottura

  1. Crea una copia dei collegamenti contenenti le immagini (nota: potresti anche utilizzare l'attributo href dei collegamenti per funzionalità aggiuntiva ... ad esempio, visualizzare il collegamento funzionante sotto ogni immagine ):

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

  2. Controlla quante immagini erano nell'HTML e crea una variabile per tracciare l'immagine che viene mostrata:

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

  3. Modifica l'HTML del documento in modo che venga mostrata solo la prima immagine. Elimina tutte le altre immagini.

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

  4. Associare una funzione da gestire quando si fa clic sul collegamento immagine.

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

    Il cuore del codice sopra sta usando ++$imgShow % $lengthper scorrere l'oggetto jQuery che contiene le immagini. ++$imgShow % $lengthprima aumenta il nostro contatore di uno, quindi modifica quel numero con quante immagini ci sono. Ciò manterrà il ciclismo dell'indice risultante da 0a length-1, che sono gli indici $imagesdell'oggetto. Ciò significa che questo codice funzionerà con 2, 3, 5, 10 o 100 immagini ... scorrendo in sequenza ciascuna immagine e riavviando alla prima immagine quando viene raggiunta l'ultima immagine.

    Inoltre, .attr()viene utilizzato per ottenere e impostare l'attributo "src" delle immagini. Per selezionare elementi tra l' $imagesoggetto, ho impostato $imagescome contesto jQuery utilizzando il modulo $(selector, context). Quindi uso .eq()solo l'elemento con l'indice specifico che mi interessa.

Esempio jsFiddle con 3 immagini


È inoltre possibile memorizzare srci messaggi in un array.
Esempio jsFiddle con 3 immagini

Ed ecco come incorporare gli href dai tag anchor intorno alle immagini:
esempio jsFiddle

— Peter Ajtai
fonte
17

Spero che questo possa funzionare

<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
Sebbene questo frammento di codice possa risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che in futuro stai rispondendo alla domanda dei lettori e che queste persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
— Derek Brown,
Grazie Derek manterrà questa cosa nella mia mente dalla prossima volta
— Zeeshan il
14

È necessario aggiungere l'attributo id al tag immagine, in questo modo: 

<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>

allora puoi usare questo codice per cambiare la fonte delle immagini:

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

Puoi anche farlo con jQuery in questo modo:

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

Puoi avere una condizione se ci sono più stati per la fonte dell'immagine.

— FernandoEscher
fonte
5
questa sintassi non è corretta. la funzione jquery attr () accetta 1 o 2 parametri. Il primo è una stringa con il nome dell'attributo HTML, il secondo è il valore per quell'attributo che si desidera impostare.
— Thiago Silva,
7

Ho avuto lo stesso problema quando provavo a chiamare il pulsante re captcha. Dopo alcune ricerche, ora la funzione di seguito funziona perfettamente in quasi tutti i browser famosi (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' viene utilizzato per il rendering di una nuova immagine captcha e può essere ignorato nel tuo caso. Il punto più importante è la generazione di un nuovo URL che costringe FF e IE a renderizzare l'immagine.

— Kayvan Tehrani
fonte
7

Cambia la fonte dell'immagine usando jQuery click()

elemento:

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

codice:

    $(".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

Nel caso in cui aggiorni l'immagine più volte e questa sia CACHED e non si aggiorni, aggiungi una stringa casuale alla fine:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— kintsukuroi
fonte
1
È molto importante, almeno per me, aggiungere la stringa casuale alla fine! Carri armati!
— Marcelo Sader
3

Oggi ho la stessa meraviglia, ho fatto così:

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

Questo è un modo garantito per farlo in Vanilla (o semplicemente Pure) JavaScript:

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

Solo un'aggiunta, per renderlo ancora più piccolo: 

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

Non è possibile modificare l'origine dell'immagine con CSS.

L'unico modo possibile è usare Javascript o qualsiasi libreria Javascript come jQuery .

Logica-

Le immagini sono all'interno di un div e non ci sono classo idcon quell'immagine.

Quindi la logica sarà selezionare gli elementi all'interno del punto in divcui si trovano le immagini.

Quindi selezionare tutti gli elementi delle immagini con loop e modificare l'immagine src con Javascript / jQuery .

Codice di esempio con uscita demo-

$(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>
Espandi frammento

— Abrar Jahin
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.