Cambiare la fonte dell’immagine usando jQuery

Puoi usare la funzione attr () di jQuery. Ad esempio, se il tag img ha un attributo id di “my_image”:

Quindi puoi cambiare lo src in jQuery tramite:

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

Per albind questo a un evento click , 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') === 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img1_on.jpg') ? 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img2_on.jpg' : 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img1_on.jpg'; $(this).attr('src', src); } }); 

Uno degli errori più comuni che si fanno quando si cambia la sorgente dell’immagine non è aspettare che il caricamento dell’immagine .load() azioni successive come la maturazione delle dimensioni dell’immagine ecc. Sarà necessario usare il metodo jQuery. .load() per fare cose 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

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

Questa soluzione è utile e funziona, ma se il cambiamento del 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 il \ “all’inizio del percorso: $("#myid").attr('src', '\images/sample.gif');

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

Ti mostrerò come modificare l’immagine src , in modo che quando fai clic su un’immagine ruoti attraverso tutte le immagini che sono nel tuo codice HTML (nella class d1 id e c1 particolare) … se hai 2 o più immagini nel tuo HTML.

Ti mostrerò anche come pulire 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. Creare una copia dei collegamenti contenenti le immagini (nota: si potrebbe anche utilizzare l’attributo href dei collegamenti per funzionalità aggiunte … ad esempio visualizzare il link di lavoro sotto ogni immagine ):

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

2. Controlla quante immagini erano nell’HTML e crea una variabile per tracciare quale immagine 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 dell’immagine.

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

   Il cuore del codice precedente utilizza ++$imgShow % $length per scorrere l’object jQuery contenente le immagini. ++$imgShow % $length prima aumenta il nostro contatore di uno, quindi modifica quel numero con quante immagini ci sono. Ciò manterrà l’indice risultante in ciclo da 0 a length-1 , che sono gli indici dell’object $images . Ciò significa che questo codice funzionerà con 2, 3, 5, 10 o 100 immagini … scorrendo ciclicamente ciascuna immagine in ordine e riavviandola 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 dall’object $images , ho impostato $images come contesto jQuery utilizzando il modulo $(selector, context) . Quindi uso .eq() per selezionare solo l’elemento con l’indice specifico a cui sono interessato.

esempio jsFiddle con 3 immagini

È inoltre ansible memorizzare i src in una matrice.
esempio jsFiddle con 3 immagini

Ed ecco come incorporare gli hrefs dai tag di ancoraggio attorno alle immagini:
esempio jsFiddle

Se non ci sono solo jQuery o altri sistemi di distruzione delle risorse – molti kb da scaricare ogni volta da ciascun utente solo per un semplice trucco – ma anche JavaScript nativo (!):

Questo può essere scritto in generale e più elegante:

Puoi farlo anche con jQuery in questo modo:

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

È ansible avere una condizione se ci sono più stati per l’origine dell’immagine.

Ho avuto lo stesso problema quando provavo a chiamare il pulsante re captcha. Dopo qualche ricerca, ora la funzione qui sotto funziona bene 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’ è usato per rendere la nuova immagine captcha e può essere ignorata nel tuo caso. Il punto più importante è la generazione di un nuovo URL che costringe FF e IE a rieseguire l’immagine.

Ho lo stesso stupore oggi, l’ho fatto in questo modo:

 // $('.myClass').attr('src','').promise().done(function() { $(this).attr('src','img/new.png'); }); 

Spero che questo possa funzionare

  Change Size $(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://sofit.miximages.com/image/.png"); flag = 0; } }); }); 

Non c’è modo di cambiare la fonte dell’immagine con i CSS.

L’unico modo ansible è usare Javascript o qualsiasi libreria Javascript come jQuery .

Logica-

Le immagini sono all’interno di un div e non ci sono class o id con quell’immagine.

Quindi la logica selezionerà gli elementi all’interno del div cui si trovano le immagini.

Quindi seleziona tutti gli elementi delle immagini con loop e cambia l’immagine src con Javascript / jQuery .

Codice di esempio con output dimostrativo-

 $(document).ready(function() { $("button").click(function() { $("#d1 .c1 a").each(function() { $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe'); }); }); }); 

  
 
   
 
 Change The Images