Javascript как изменить src (путь) изображения
Src позволяет задать элементу путь к контенту. Самый простой способ его изменить (без jQuery), это указать явно:
‘myImage’ src= ‘/1.png’ />
document.getElementById( «myImage» ).src= «/2.png» ;
Сразу для нескольких элементов:
‘myImage1’ src= ‘/1.png’ />
‘myImage2’ src= ‘/1.png’ />
‘myImage3’ src= ‘/1.png’ />
window.addEventListener( «load» , function load() <
var imgs=[ «myImage1» , «myImage2» , «myImage3» ];
imgs.forEach( function (elementId)<
document.getElementById(elementId).src= ‘/2.png’ ;
С помощью jQuery:
$( «.myImages» ).attr( «src» , «/1.png» );
С помощью jQuery при наведении:
‘myImages’ src= «/images/news/130—15-09-17—11-28-00.jpg» style= «width: 50%» />
‘myImages’ src= «/images/news/104-lovely-mountain.jpg» style= «width: 50%» />
$( «.myImages» ).on( «mouseover» , function (event) <
var img1 = «/images/news/130—15-09-17—11-28-00.jpg» ;
var img2 = «/images/news/104-lovely-mountain.jpg» ;
$( this ).attr( «src» ) ===img1 ? img2 : img1
event.preventDefault();
return false ;
Наведи на курсор на изображения:
Как изменить атрибут src?
реализовал так, суть была в том что у меня есть много элементов без id и с одинаковыми классами,
это кнопки воспроизведения музыки , при клике должна кнопка меняться.
Ответ написан более трёх лет назад
dimasibirak @dimasibirak Автор вопроса
Код скопировал из интернета, сам я в js плохо понимаю,точнее только пытаюсь его понять.
Забил я переменную изначально чтоб проверить и выполнить условия,затем изменить переменную.
мне нужно было добиться эффекта смены кнопки по клику.
Ответы на вопрос 1
Учим yii: https://youtu.be/-WRMlGHLgRg
id_click = $(this).attr(«src»); — так нельзя, делайте так
var id_click = $(this).attr(«src»);
Мало того. Вы вначале в переменную id_click забили src а потом заменили другим значением.Смысл этой манипуляции?
И собственно Вы нигде не меняете src, вы его взяли, засунули в переменную и там заменили другой строкой. Потом вывели эту строку в алерте. Видимо надо после всех манипуляций сделать
$(‘.some_class’).attr(‘src’,id_click); что бы сменить таки где-то src
Курсы javascript
Доброго времени уважаемым гуру js.
Скажем есть тег img с неким src. Страница загружается, картинка браузером кэшируется. Далее программно заменяем scr на другую картинку. Понятно, что при перезагрузке, появится новая картинка. А можно ли заставить движок заменить картинку из кэша на новую без перезагрузки страницы?
27.08.2018, 21:31
Регистрация: 27.05.2010
Сообщений: 33,071
atanov,
localStorage
27.08.2018, 21:39
Регистрация: 27.06.2016
Сообщений: 180
А поподробнее
27.08.2018, 21:53
Регистрация: 27.05.2010
Сообщений: 33,071
atanov,
а макет?
27.08.2018, 22:09
Регистрация: 02.01.2010
Сообщений: 6,495
Я так понял заменяете вы на сервере?
Тогда:
img.src = img.src.replace(/(?:\?.*)?$/, '?' + +new Date);
Если сервер посылает заголовки no-cache, то и просто
img.src = img.src;
должно сработать.
__________________
27.08.2018, 22:19
Регистрация: 27.05.2010
Сообщений: 33,071
видимо я неправильно понял вопрос.
27.08.2018, 22:42
Регистрация: 02.01.2010
Сообщений: 6,495
рони, а может и я, кто знает.
__________________
27.08.2018, 23:34
Регистрация: 01.12.2016
Сообщений: 3,650
28.08.2018, 10:04
Регистрация: 27.06.2016
Сообщений: 180
img.src = img.src.replace(/(?:\?.*)?$/, '?' + +new Date);
Если сервер посылает заголовки no-cache, то и просто
img.src = img.src;
Да, заменяю картинку на сервере (или новую вставляю) ajax’ом + ещё изменяю информацию в бд. Далее возвращаю из бд уже изменённую инфу и json’ом отправляю обратно на клиент. json на клиенте распарсиваю и вставляю в соответствующие места, а src картинки просто подменяю. Вот в примере j0hnik это прекрасно работает, у меня только после перезагрузки
как поменять картинку js
Для того, чтобы поменять картинку нужно изменить атрибут src у элемента на новый путь к картинке.
id="myImg" src="old-image.jpg" alt="Old Image"> onclick="changeImage()">Change Image function changeImage() const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> В результате выполнения кода выше, картинка на странице будет заменена на новую.