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

Мой 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 для изменения изображений?

Ответы

Ответ 1

Вы можете использовать функцию 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);
    }
});

Ответ 2

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

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

});

Причина редактирования: fooobar.com/questions/14665/...

Ответ 3

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

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

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

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

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

Ответ 4

Я покажу вам, как изменить изображение 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();

    });
});

Пробой

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

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

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

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

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

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

    В сердце этого кода используется ++$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 в массиве.
Пример jsFiddle с 3 изображениями

И здесь, как включить hrefs из привязанных меток вокруг изображений:
Пример jsFiddle

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

Если вы хотите что-то использовать с помощью jQuery, вы можете посмотреть в jQuery Cycle Plugin, demo scrollRight (внизу справа)

Ответ 10

Сегодня у меня такое же удивление, что и я:

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

Ответ 11

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

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

Ответ 12

Просто дополнение, чтобы сделать его еще более крошечным:

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

Ответ 13

Изменить источник изображения с помощью 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);
        }
    });

Ответ 14

Невозможно изменить источник изображения с помощью CSS.

Только возможно использовать Javascript или любой Javascript, например jQuery.

Логика -

Изображения находятся внутри div, и с этим изображением нет class или id.

Таким образом, логика будет выбирать элементы внутри div, где находятся изображения.

Затем выберите все элементы изображений с контуром и измените изображение src с помощью Javascript/jQuery.

Пример кода с демонстрационным выходом -

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

Ответ 15

Вы должны добавить атрибут id в тег изображения, например:

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

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

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