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?

javascript jquery image pengguna67033
sumber
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);
    }
});
Johnstjohn
sumber
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

Mohsen
sumber
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.

wphonestudio
sumber
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>
inco
sumber
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

Peter Ajtai
sumber
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;
        }
    });
});
Zeeshan
sumber
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" });
    });
Tuan Bitmap
sumber
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.

FernandoEscher
sumber
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.

Kayvan Tehrani
sumber
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);
        }
    });
Abhijit Poojari
sumber
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());
kintsukuroi
sumber
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');  
});
Anyone_ph
sumber
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;
Raymond Wachaga
sumber
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');
});
Szél Lajos
sumber
-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>
Luaskan cuplikan

Abrar Jahin
sumber