Изменение источника изображения с помощью jQuery - PullRequest
Новая
       70

Изменение источника изображения с помощью jQuery

655 голосов
/ 16 февраля 2009

Мой DOM выглядит так: 

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

Когда кто-то нажимает на изображение, я хочу, чтобы src изображения изменился на <img src="imgx_off.gif">, где x представляет изображение № 1 или 2.

Возможно ли это, или мне нужно использовать CSS для изменения изображений?

Ответы [ 14 ]

1524 голосов
/ 16 февраля 2009

Вы можете использовать функцию jQuery attr () . Например, если ваш тег img имеет атрибут id my_image, вы должны сделать это: 

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

Затем вы можете изменить src вашего изображения с помощью jQuery следующим образом: 

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

Чтобы прикрепить это к событию click, вы можете написать: 

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

Чтобы повернуть изображение, вы можете сделать это: 

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
74 голосов
/ 22 марта 2012

Одна из распространенных ошибок, которые делают люди, когда смена источника изображения не ожидает загрузки изображения, чтобы выполнить последующие действия, такие как изменение размера изображения и т. Д. Вам нужно будет использовать метод jQuery .load(), чтобы делать вещи после загрузки изображения. 

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

});

Причина редактирования: https://stackoverflow.com/a/670433/561545

19 голосов
/ 20 июля 2016

Для получения дополнительной информации. Я пытаюсь установить атрибут src с помощью метода attr в jquery для изображения объявления, используя синтаксис, например: $("#myid").attr('src', '/images/sample.gif');

Это решение полезно и работает, но если изменить путь, измените также путь к изображению и не работаете.

Я искал решение этой проблемы, но ничего не нашел.

Решение состоит в том, чтобы поставить '\' в начале пути: $("#myid").attr('src', '\images/sample.gif');

Этот трюк очень полезен для меня, и я надеюсь, что он полезен для других.

17 голосов
/ 14 сентября 2011

ЕСЛИ есть не только jQuery или другие среды для уничтожения ресурсов - много килобайт каждый раз для загрузки каждым пользователем просто для простого трюка, но и собственный 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';">

Это можно записать как общее и более элегантное: 

<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>
17 голосов
/ 12 сентября 2010

Я покажу вам, как изменить изображение src, чтобы при нажатии на изображение оно вращалось по всем изображениям в вашем HTML (в частности, в вашем d1 id и c1 классе). .. есть ли у вас 2 или более изображений в вашем HTML.

Я также покажу вам, как очистить страницу после того, как документ будет готов, чтобы изначально отображалось только одно изображение.

Полный код 

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

    });
});

Пробой

  1. Создайте копию ссылок, содержащих изображения (примечание: вы также можете использовать атрибут href ссылок для дополнительной функциональности ... например, отображать рабочую ссылку под каждым изображение ): 

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

  2. Проверьте, сколько изображений было в HTML, и создайте переменную для отслеживания того, какое изображение отображается: 

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

  3. Измените HTML документа, чтобы только отображалось первое изображение. Удалите все остальные изображения. 

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

  4. Привязать функцию для обработки при нажатии на ссылку изображения. 

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

    В основе приведенного выше кода используется ++$imgShow % $length для циклического перемещения по объекту jQuery, содержащему изображения. ++$imgShow % $length сначала увеличивает наш счетчик на единицу, затем изменяет это число на количество изображений. В результате результирующий индекс будет циклически изменяться от 0 до length-1, которые являются индексами объекта $images. Это означает, что этот код будет работать с 2, 3, 5, 10 или 100 изображениями ... циклически проходя по каждому изображению по порядку и перезапуская первое изображение после достижения последнего изображения.

    Кроме того, .attr() используется для получения и установки атрибута "src" изображений. Чтобы выбрать элементы из объекта $images, я установил $images как контекст jQuery , используя форму $(selector, context). Затем я использую .eq(), чтобы выбрать только элемент с конкретным интересующим меня индексом.

Пример jsFiddle с 3 изображениями


Вы также можете хранить src s в массиве.
jsFiddle пример с 3 изображениями

А вот как добавить ссылки на теги привязки вокруг изображений:
jsFiddle пример

14 голосов
/ 21 мая 2018

Надеюсь, что это может работать 

<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;
        }
    });
});
9 голосов
/ 28 сентября 2010

Вы также можете сделать это с помощью jQuery следующим образом: 

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

Вы можете иметь условие, если для источника изображения существует несколько состояний.

7 голосов
/ 24 июля 2017

У меня была такая же проблема при попытке вызвать кнопку повторной проверки. После некоторого поиска теперь приведенная ниже функция прекрасно работает практически во всех известных браузерах (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' используется для рендеринга нового изображения капчи и может быть проигнорировано в вашем случае. Наиболее важным моментом является создание нового URL, который заставляет FF и IE перерисовывать изображение.

3 голосов
/ 04 апреля 2019

Изменить источник изображения с помощью jQuery click()

элемент: 

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

Код: 

    $(".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);
        }
    });
3 голосов
/ 13 ноября 2018

Это гарантированный способ сделать это в Vanilla (или просто Pure). JavaScript: 

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...