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

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

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

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

});

Причина редактирования: https://stackoverflow.com/questions/318630/get-the-real-width-and-height-of-an-image-with-javascript-in-safari-chrome

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

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

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

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

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

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

ЕСЛИ существует не только 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>

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

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

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

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

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

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

У меня была такая же проблема при попытке вызвать кнопку 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 перерисовывать изображение.

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