Mengubah sumber gambar menggunakan jQuery


764

DOM saya terlihat seperti ini:

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

Ketika seseorang mengklik gambar, saya ingin gambar src berubah ke <img src="imgx_off.gif">tempat yang xmewakili nomor gambar 1 atau 2.

Apakah ini mungkin atau apakah saya harus menggunakan CSS untuk mengubah gambar?


Jika Anda menginginkan sesuatu menggunakan jQuery, Anda mungkin ingin melihat ke dalam jQuery Cycle Plugin, demo scrollRight (contoh kanan bawah)
TomHastjarjanto

43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
manish nautiyal

9
Anda harus benar-benar menerima jawaban jonstjohn :) Jumlah upvotes pada kedua pertanyaan dan jawaban menunjukkan banyak orang telah mengalami ini. Itu akan meningkatkan pertanyaan untuk mendapatkan jawaban yang diterima.
Xcelled

4
Hingga Tanggal, yaitu 19th July, 2016 15:39 PM, Pertanyaan Upvotes Count 369 Dan @jonstjohn Answer Upvotes Count 931 . Tapi, Nasib Buruk, @OP Tidak Masuk Setelah Feb 17 '09 at 2:57. :(Dan, @jonstjohn Jawaban Tetap bertanda .
Nana Partykar

@Xcelled, satu-satunya masalah adalah jawaban jonstjohn tidak menjawab pertanyaan. Ini adalah hal kecil tapi layak dibuat. Lihatlah jawaban inco karena satu-satunya di sini yang benar-benar menjawab pertanyaan dengan benar.
David Newcomb

Jawaban:


1687

Anda dapat menggunakan fungsi attr () jQuery . Misalnya, jika imgtag Anda memiliki idatribut 'my_image', Anda akan melakukan ini:

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

Kemudian Anda dapat mengubah srcgambar Anda dengan jQuery seperti ini:

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

Untuk melampirkan ini ke suatu clickacara, Anda dapat menulis:

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

Untuk memutar gambar, Anda bisa melakukan ini:

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

79

Salah satu kesalahan umum yang dilakukan orang ketika mengubah sumber gambar adalah tidak menunggu pemuatan gambar untuk melakukan tindakan sesudahnya seperti pematangan ukuran gambar, dll. Anda harus menggunakan .load()metode jQuery untuk melakukan hal-hal setelah memuat gambar.

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

});

Alasan untuk mengedit: https://stackoverflow.com/a/670433/561545


Iya. Ini akhirnya berhasil. .destroy () tidak cukup jauh. Nuking semua html dan init lagi benar-benar berfungsi ketika menukar gambar berbagai ukuran dan semacamnya.
Matt J.

perhatikan bahwa memuat tidak akan menyala secara andal, terutama jika gambar ada di cache. Lihat dokumentasi jQuery.
Twilite

19

Untuk informasi lebih lanjut. Saya mencoba mengatur atribut src dengan metode attr di jquery untuk gambar iklan menggunakan sintaksis misalnya:$("#myid").attr('src', '/images/sample.gif');

Solusi ini bermanfaat dan berfungsi tetapi jika mengubah jalur, ubah juga jalur untuk gambar dan tidak berfungsi.

Saya sudah mencari penyelesaian masalah ini tetapi tidak menemukan apa pun.

Solusinya adalah meletakkan '\' di awal jalan: $("#myid").attr('src', '\images/sample.gif');

Trik ini sangat berguna bagi saya dan saya harap ini berguna bagi orang lain.


18

JIKA tidak hanya kerangka kerja jQuery atau sumber daya lainnya - banyak kb yang diunduh setiap kali oleh setiap pengguna hanya untuk trik sederhana - tetapi juga JavaScript asli (!):

<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';">

Ini dapat ditulis secara umum dan lebih elegan:

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

Itu selalu mengejutkan saya betapa banyak orang tidak bisa membaca pertanyaan dan memberikan jawaban yang diminta. Tampak jelas bagi saya (dan Anda) bahwa pertanyaannya adalah mencari solusi generik yang mengapa OP memberikan 2 contoh. Namun semua orang tampaknya tidak hanya benar-benar melewatkannya tetapi memberikan jawaban yang bahkan tidak menjawab pertanyaan. :(
David Newcomb

17

Saya akan menunjukkan kepada Anda cara mengubah gambar src, sehingga ketika Anda mengklik gambar, gambar tersebut berputar melalui semua gambar yang ada di HTML Anda (dalam d1id dan c1kelas Anda secara khusus) ... apakah Anda memiliki 2 gambar atau lebih dalam HTML Anda .

Saya juga akan menunjukkan kepada Anda cara membersihkan halaman setelah dokumen siap, sehingga hanya satu gambar yang ditampilkan pada awalnya.

Kode lengkap

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

    });
});

Kerusakan

  1. Buat salinan tautan yang berisi gambar (catatan: Anda juga dapat menggunakan atribut href dari tautan untuk fungsionalitas tambahan ... misalnya menampilkan tautan yang berfungsi di bawah setiap gambar ):

        var $images = $("#d1 > .c1 > a").clone();  ;
  2. Periksa berapa banyak gambar dalam HTML dan buat variabel untuk melacak gambar mana yang sedang ditampilkan:

    var $length = $images.length;
    var $imgShow = 0;
  3. Ubah HTML dokumen sehingga hanya gambar pertama yang ditampilkan. Hapus semua gambar lainnya.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
  4. Bind fungsi untuk menangani ketika tautan gambar diklik.

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

    Inti dari kode di atas adalah menggunakan ++$imgShow % $lengthuntuk menelusuri objek jQuery yang berisi gambar. ++$imgShow % $lengthpertama meningkatkan penghitung kita dengan satu, kemudian mod nomor itu dengan berapa banyak gambar yang ada. Hal ini akan menjaga resultan indeks bersepeda dari 0ke length-1, yang merupakan indeks dari $imagesobjek. Ini berarti kode ini akan berfungsi dengan 2, 3, 5, 10, atau 100 gambar ... bersepeda melalui masing-masing gambar secara berurutan dan memulai kembali pada gambar pertama ketika gambar terakhir tercapai.

    Selain itu, .attr()digunakan untuk mendapatkan dan mengatur atribut "src" dari gambar. Untuk memilih elemen dari antara $imagesobjek, saya menetapkan $imagessebagai konteks jQuery menggunakan formulir $(selector, context). Lalu saya gunakan .eq()untuk memilih hanya elemen dengan indeks spesifik yang saya tertarik.


Contoh jsFiddle dengan 3 gambar


Anda juga dapat menyimpan srcs dalam sebuah array.
Contoh jsFiddle dengan 3 gambar

Dan inilah cara menggabungkan hrefs dari tag anchor di sekitar gambar:
contoh jsFiddle


17

Semoga ini bisa berhasil

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

Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Derek Brown

Terima kasih Derek akan menyimpan hal ini dalam pikiran saya dari waktu berikutnya dan seterusnya
Zeeshan

14

Anda harus menambahkan atribut id ke tag gambar Anda, seperti ini:

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

maka Anda dapat menggunakan kode ini untuk mengubah sumber gambar:

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

9

Anda juga dapat melakukan ini dengan jQuery dengan cara ini:

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

Anda dapat memiliki kondisi jika ada beberapa status untuk sumber gambar.


5
sintaks ini tidak benar. fungsi jquery attr () membutuhkan 1 atau 2 params. Yang pertama adalah string dengan nama atribut HTML, yang kedua adalah nilai untuk atribut yang ingin Anda atur.
Thiago Silva

7

Saya memiliki masalah yang sama ketika mencoba memanggil tombol re captcha. Setelah beberapa pencarian, sekarang fungsi di bawah ini berfungsi dengan baik di hampir semua browser terkenal (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' digunakan untuk membuat gambar captcha baru dan dapat diabaikan dalam kasus Anda. Poin paling penting adalah menghasilkan URL baru yang memaksa FF dan IE untuk membuat ulang gambar.


7

Ubah sumber gambar menggunakan jQuery click()

elemen:

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

kode:

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

7

Jika Anda memperbarui gambar beberapa kali dan itu akan di- cache dan tidak diperbarui, tambahkan string acak di akhir:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

1
Sangat penting, setidaknya bagi saya, untuk menambahkan string acak di akhir! Tank!
Marcelo Sader

3

Saya memiliki keajaiban yang sama hari ini, saya lakukan dalam cara ini:

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

3

Ini adalah cara yang dijamin untuk menyelesaikannya di JavaScript Vanilla (atau cukup Murni):

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

1

Hanya tambahan, untuk membuatnya lebih kecil:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

-1

Tidak ada cara untuk mengubah sumber gambar dengan CSS.

Hanya cara yang mungkin adalah menggunakan Javascript atau perpustakaan Javascript seperti jQuery .

Logika-

Gambar ada di dalam div dan tidak ada classatau iddengan gambar itu.

Jadi logika akan memilih elemen di dalam divtempat gambar berada.

Kemudian pilih semua elemen gambar dengan lingkaran dan ubah src gambar dengan Javascript / jQuery .

Contoh Kode dengan output 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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.