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

Question

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

891

javascript jquery image

Источник

user67033 16 фев '09 в 19:23

17 ответов

Другие вопросы по тегам javascript jquery image

user67009 16 фев '09 в 19:27 2009-02-16 19:27 · Answer 1 · 2009-02-16 19:27

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

user650722 22 мар '12 в 16:35 2012-03-22 16:35 · Answer 2 · 2012-03-22 16:35

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

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

});

Причина редактирования: /questions/12550881/poluchit-realnuyu-shirinu-i-vyisotu-izobrazheniya-s-pomoschyu-javascript-v-safarichrome/12550898#12550898

user6252345 16 янв '20 в 23:05 2020-01-16 23:05 · Answer 3 · 2020-01-16 23:05

В случае, если вы обновляете изображение несколько раз, и оно ЗАКЕШИВАЕТСЯ и не обновляется, добавьте случайную строку в конце:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

37

Источник

user6252345 16 янв '20 в 23:05

user6454185 20 июл '16 в 10:01 2016-07-20 10:01 · Answer 4 · 2016-07-20 10:01

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

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

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

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

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

user943464 13 сен '11 в 21:44 2011-09-13 21:44 · Answer 5 · 2011-09-13 21:44

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

user4622864 21 май '18 в 12:45 2018-05-21 12:45 · Answer 6 · 2018-05-21 12:45

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

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

user186636 11 сен '10 в 23:27 2010-09-11 23:27 · Answer 7 · 2010-09-11 23:27

Я покажу вам, как изменить изображение src, так что когда вы нажимаете на изображение, оно вращается через все изображения, которые находятся в вашем HTML (в вашем d1 идентификатор и 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

user5326625 28 апр '19 в 11:17 2019-04-28 11:17 · Answer 8 · 2019-04-28 11:17

Вы должны добавить атрибут 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" });
    });

user176376 28 сен '10 в 00:44 2010-09-28 00:44 · Answer 9 · 2010-09-28 00:44

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

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

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

9

Источник

user176376 28 сен '10 в 00:44

user8932378 04 апр '19 в 13:59 2019-04-04 13:59 · Answer 10 · 2019-04-04 13:59

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

user732328 24 июл '17 в 12:57 2017-07-24 12:57 · Answer 11 · 2017-07-24 12:57

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

user5165530 30 дек '20 в 15:46 2020-12-30 15:46 · Answer 12 · 2020-12-30 15:46

Я сделал codepen именно с этой функциональностью здесь. Я также дам вам разбивку кода здесь.

Кодепен

5

Источник

user5165530 30 дек '20 в 15:46

user5925104 13 ноя '18 в 10:46 2018-11-13 10:46 · Answer 13 · 2018-11-13 10:46

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

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

3

Источник

user5925104 13 ноя '18 в 10:46

user3155987 04 апр '16 в 17:48 2016-04-04 17:48 · Answer 14 · 2016-04-04 17:48

У меня сегодня такое же чудо, которое я сделал по этому пути:

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

3

Источник

user3155987 04 апр '16 в 17:48

user860099 15 июн '20 в 01:00 2020-06-15 01:00 · Answer 15 · 2020-06-15 01:00

Коротко, но точно

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

let pic=[
  "https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif",
  "https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"
];

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>

user4570923 27 окт '18 в 16:53 2018-10-27 16:53 · Answer 16 · 2018-10-27 16:53

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

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

1

Источник

user4570923 27 окт '18 в 16:53

user2193439 08 апр '16 в 05:55 2016-04-08 05:55 · Answer 17 · 2016-04-08 05:55

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

Единственно возможный способ - использовать Javascript или любую библиотеку Javascript, такую как jQuery.

логическая единица

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

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

Затем выберите все элементы изображений с помощью цикла и измените изображение с помощью 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>