Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.10.2015, 00:27
Новичок на форуме
Отправить личное сообщение для Kostas Посмотреть профиль Найти все сообщения от Kostas
 
Регистрация: 29.07.2013
Сообщений: 7

Источник изображения по условию
Всем привет. Дело встало за следующим. В зависимости от разрешения окна браузера, должен меняться источник картинки. Варианты с @media не подходят, так как картинка должна быть не фоном а строкой типа <img src=""" />

Попробовал сделать так

<div class="test">
    <img src="/A/img.jpg" />
 </div>

<script>
 	if (screen.width <= 480) 
 		{document.getElementsByClassName('test')[0].innerHTML = '<img src="/B/img.jpg" />'}

</script>


Вариант работает, но учитывая то, что картинок несколько десятков, придется вручную прописывать getElementsByClassName для каждой картинки. Может быть можно сделать решение более компактным?
Ответить с цитированием
  #2 (permalink)  
Старый 19.10.2015, 01:46
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Цитата:
придется вручную прописывать getElementsByClassName
А как насчет обойти все элементы в цикле?

function setImages(str) {
	[].forEach.call(document.querySelectorAll('.test'), function(item) {
    	item.innerHTML = str;
    });
}

if (screen.width <= 480) {
	setImages('<img src="/B/img.jpg" />');
}

Последний раз редактировалось Lemme, 19.10.2015 в 01:50.
Ответить с цитированием
  #3 (permalink)  
Старый 19.10.2015, 09:49
Новичок на форуме
Отправить личное сообщение для Kostas Посмотреть профиль Найти все сообщения от Kostas
 
Регистрация: 29.07.2013
Сообщений: 7

Циклом можно, но в setImages можно только одно изображение прописать, а у нас картинки то разные. В зависимости от разрешения экрана в адресе img должна меняться папка

/A/img1.jpg
/A/img5.jpg
/A/img10.jpg

if экран меньше 480 то

/B/img1.jpg
/B/img5.jpg
/B/img10.jpg
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2015, 00:59
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Проходи в цикле картинки при условии, дергай у каждой картинки src, потом замени путь и вставь его заного.
var str = "/A/img.jpg";
var str2 = str.replace("/A/","/B/");
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 21:56
DropDown menu в части изображения Hardip Элементы интерфейса 1 20.04.2012 00:20
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04
карта увеличенного изображения Luna82 Элементы интерфейса 11 15.06.2011 10:17