Zmiana źródła obrazu za pomocą jQuery

763

Mój DOM wygląda następująco:

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

Gdy ktoś kliknie obraz, chcę, aby obraz src zmienił się na <img src="imgx_off.gif">gdzie xreprezentuje obraz numer 1 lub 2.

Czy to możliwe, czy muszę używać CSS do zmiany obrazów?

javascript jquery image użytkownik67033
źródło
Jeśli chcesz czegoś za pomocą jQuery, możesz zajrzeć do wtyczki jQuery Cycle, przewijania wersji demonstracyjnej w prawo (przykład w prawym dolnym rogu)
TomHastjarjanto
43
jQuery („# my_image”). attr („src”, „first.jpg”)
manish nautiyal
9
Powinieneś naprawdę zaakceptować odpowiedź jonstjohna :) Liczba głosów pozytywnych zarówno na pytanie, jak i odpowiedź wskazuje, że wiele osób na to wpadło. Poprawiłoby to pytanie, aby uzyskać akceptowaną odpowiedź.
Xcelled
4
Do daty, tj. 19th July, 2016 15:39 PMLiczba głosów pozytywnych liczy 369 i @jonstjohn Odpowiedź liczba głosów pozytywnych 931 . Ale Such A Bad Luck, @OP nie zalogował się później Feb 17 '09 at 2:57. :(I @jonstjohn Odpowiedź Pozostają nieoznakowanych .
Nana Partykar
@Xcelled, jedynym problemem jest to, że odpowiedź jonstjohn nie odpowiada na pytanie. To drobna uwaga, ale warta uwagi. Spójrz na odpowiedź inco, ponieważ jest to jedyna odpowiedź, która faktycznie odpowiada na pytanie.
David Newcomb

Odpowiedzi:

1686

Możesz użyć funkcji attr () jQuery . Na przykład, jeśli twój imgtag ma idatrybut „my_image”, zrobiłbyś to:

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

Następnie możesz zmienić srcobraz za pomocą jQuery w następujący sposób:

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

Aby dołączyć to do clickwydarzenia, możesz napisać:

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

Aby obrócić obraz, możesz to zrobić:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
jonstjohn
źródło
79

Jednym z typowych błędów popełnianych przez ludzi podczas zmiany źródła obrazu nie jest oczekiwanie na ładowanie obrazu, aby wykonać późniejsze czynności, takie jak dojrzewanie rozmiaru obrazu itp. Aby .load()załadować obraz, trzeba użyć metody jQuery .

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

});

Powód edycji: https://stackoverflow.com/a/670433/561545

Mohsen
źródło
Tak. To w końcu załatwiło sprawę. .destroy () nie idzie wystarczająco daleko. Nukowanie całego html'a i ponowne inicjowanie faktycznie działa podczas zamiany obrazów o różnych rozmiarach i tak dalej.
Matt J.
zwróć uwagę, że ładowanie nie uruchomi się niezawodnie, szczególnie jeśli obraz znajduje się w pamięci podręcznej. Zobacz dokumentację jQuery.
Twilite
19

Po więcej informacji. Próbuję ustawić atrybut src za pomocą metody attr w jquery dla obrazu reklamy, używając na przykład składni:$("#myid").attr('src', '/images/sample.gif');

To rozwiązanie jest przydatne i działa, ale jeśli zmienisz ścieżkę, zmień także ścieżkę obrazu i nie działa.

Szukam rozwiązania tego problemu, ale nic nie znalazłem.

Rozwiązaniem jest umieszczenie „\” na początku ścieżki: $("#myid").attr('src', '\images/sample.gif');

Ta sztuczka jest dla mnie bardzo przydatna i mam nadzieję, że przyda się innym.

wphonestudio
źródło
18

JEŻELI istnieje nie tylko środowisko jQuery lub inne struktury zabijania zasobów - wiele KB do pobrania za każdym razem przez każdego użytkownika tylko dla prostej sztuczki - ale także natywny JavaScript (!):

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

Można to napisać ogólnie i bardziej elegancko:

<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
źródło
Zawsze mnie zaskakuje, ile osób nie może przeczytać pytania i udzielić żądanej odpowiedzi. Wydawało mi się (dla ciebie) oczywiste, że pytanie szukało ogólnego rozwiązania, dlatego PO podał 2 przykłady. A jednak wszyscy wydawali się nie tylko całkowicie tęsknić, ale dać odpowiedź, która nawet nie odpowiedziała na pytanie. :(
David Newcomb
17

Pokażę ci, jak zmienić obraz src, aby po kliknięciu obraz obracał się przez wszystkie obrazy, które są w twoim HTML (w twoim d1identyfikatorze i c1klasie) ... czy masz 2 lub więcej obrazów w twoim HTML .

Pokażę też, jak wyczyścić stronę po przygotowaniu dokumentu, tak aby początkowo wyświetlał się tylko jeden obraz.

Pełny kod

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

    });
});

Podział

  1. Utwórz kopię linków zawierających obrazy (uwaga: możesz również skorzystać z atrybutu href linków dla dodatkowej funkcjonalności ... na przykład wyświetl link roboczy pod każdym obrazem ):

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

  2. Sprawdź, ile obrazów było w kodzie HTML i utwórz zmienną, aby śledzić, który obraz jest wyświetlany:

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

  3. Zmodyfikuj kod HTML dokumentu, aby wyświetlał się tylko pierwszy obraz. Usuń wszystkie pozostałe obrazy.

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

  4. Powiąż funkcję do obsługi po kliknięciu łącza obrazu.

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

    Serce powyższego kodu służy ++$imgShow % $lengthdo przechodzenia między obiektami jQuery zawierającymi obrazy. ++$imgShow % $lengthnajpierw zwiększa nasz licznik o jeden, a następnie modyfikuje tę liczbę o liczbę obrazów. Dzięki temu wynikowy indeks będzie się zmieniał od 0do length-1, które są indeksami$images obiektu. Oznacza to, że ten kod będzie działał z 2, 3, 5, 10 lub 100 obrazami ... cyklicznie przechodząc między poszczególnymi obrazami i uruchamiając ponownie od pierwszego obrazu po osiągnięciu ostatniego obrazu.

    Ponadto .attr()służy do pobierania i ustawiania atrybutu „src” obrazów. Aby wybrać elementy z $imagesobiektu, ustawiam $imagesjako kontekst jQuery za pomocą formularza $(selector, context). Następnie .eq()wybieram tylko element o określonym indeksie, który mnie interesuje.

Przykład jsFiddle z 3 obrazami


Możesz także przechowywać srcs w tablicy.
Przykład jsFiddle z 3 obrazami

A oto jak włączyć hrefs ze znaczników zakotwiczenia wokół obrazów:
przykład jsFiddle

Peter Ajtai
źródło
17

Mam nadzieję, że to zadziała

<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
źródło
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Derek Brown,
Dzięki, Derek zachowa to w mojej głowie od następnego razu
Zeeshan
14

Powinieneś dodać atrybut id do tagu obrazu, jak poniżej: 

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

możesz użyć tego kodu, aby zmienić źródło obrazów:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
Pan Bitmap
źródło
9

Możesz to również zrobić za pomocą jQuery w następujący sposób:

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

Możesz mieć warunek, jeśli istnieje wiele stanów dla źródła obrazu.

FernandoEscher
źródło
5
ta składnia jest nieprawidłowa. funkcja attr () jquery przyjmuje 1 lub 2 parametry. Pierwszy to ciąg z nazwą atrybutu HTML, a drugi to wartość tego atrybutu, który chcesz ustawić.
Thiago Silva,
7

Miałem ten sam problem, gdy próbowałem wywołać przycisk re captcha. Po pewnym wyszukiwaniu, teraz poniższa funkcja działa dobrze w prawie wszystkich znanych przeglądarkach (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” służy do renderowania nowego obrazu captcha i może zostać zignorowany w twoim przypadku. Najważniejszym punktem jest wygenerowanie nowego adresu URL, który zmusza FF i IE do ponownego wyświetlenia obrazu.

Kayvan Tehrani
źródło
7

Zmień źródło obrazu za pomocą jQuery click()

element:

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

kod:

    $(".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
źródło
7

Jeśli obraz zostanie zaktualizowany wiele razy i zostanie ZACHOWANY i nie zaktualizuje się, dodaj losowy ciąg na końcu:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
kintsukuroi
źródło
1
Bardzo ważne jest, przynajmniej dla mnie, dodanie losowego ciągu na końcu! Czołgi!
Marcelo Sader
3

Mam dzisiaj ten sam cud, co zrobiłem w ten sposób:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
Any_ph
źródło
3

Jest to gwarantowany sposób na wykonanie tego w waniliowym (lub po prostu czystym) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Raymond Wachaga
źródło
1

Tylko dodatek, aby uczynić go jeszcze bardziej małym: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Szél Lajos
źródło
-1

Nie ma możliwości zmiany źródła obrazu za pomocą CSS.

Jedynym możliwym sposobem jest użycie Javascript lub dowolnej biblioteki JavaScript, takiej jak jQuery .

Logika-

Obrazy są wewnątrz div i nie ma tego obrazu classlub nie ma idgo.

Logika będzie więc wybierać elementy wewnątrz, divgdzie znajdują się obrazy.

Następnie zaznacz wszystkie elementy obrazów za pomocą pętli i zmień obraz src za pomocą Javascript / jQuery .

Przykładowy kod z wyjściem 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>
Rozwiń fragment kodu

Abrar Jahin
źródło