При нажатии на картинку изменяется другая картинка

@0legovich · Регистрация: 31.03.2014

Author24 — интернет-сервис помощи студентам

Собственно при нажатии цвета необходимо что бы менялся телефон. Спасибо

@Lazy_Den · 01.04.2015, 00:17

HTML5

<div class="area"></div>
<span class="sample" data-color="#f0e0d0"></span>
<span class="sample" data-color="#d4d6d5"></span>
<span class="sample" data-color="#7b7c81"></span>

Javascript

var d = document,
    area = d.querySelector('.area'),
    samples = [].slice.call(d.querySelectorAll('.sample'));
 
samples.forEach(function(el){
    el.addEventListener('click', function(){
        area.style.backgroundColor = this.dataset.color;
    }, false);
    el.style.backgroundColor = el.dataset.color;
});

@0legovich · 01.04.2015, 20:21 **[ТС]**

Не совсем то, необходимо что бы из файловой системы загружалась картинка (а именно мобильный телефон), а не менялся цвет на тот который нажимаешь.

@Lazy_Den · 01.04.2015, 21:18

Сообщение от 0legovich

что бы из файловой системы загружалась картинка

Пусть так. От этого принцип не меняется.

HTML5

<div class="area">
    <img src="path/image1.jpg" alt=""/>
</div>
<span class="sample" data-img="path/image1.jpg"></span>
<span class="sample" data-img="path/image2.jpg"></span>
<span class="sample" data-img="path/image3.jpg"></span>

Javascript

var d = document,
    img = d.querySelector('.area img'),
    samples = [].slice.call(d.querySelectorAll('.sample'));
 
samples.forEach(function(el){
    el.addEventListener('click', function(){
        img.src = this.dataset.img;
    }, false);
});

@Okayguys · 21.02.2017, 20:02

По какой причине сайт меняет цвета (первый пример), а картинки менять не хочет?
Прошу помочь.
Могу скинуть сайт, если надо. (в консоли никаких ошибок нет)
Может какая-то альтернатива есть, чтобы протестировать. Я потому что не нашел.

@0legovich 1 / 1 / 0 Регистрация: 31.03.2014 Сообщений: 32
		1
	При нажатии на картинку изменяется другая картинка 31.03.2015, 23:44. Показов 4994. Ответов 4 Метки нет (Все метки) Собственно при нажатии цвета необходимо что бы менялся телефон. Спасибо Миниатюры 0

@0legovich 1 / 1 / 0 Регистрация: 31.03.2014 Сообщений: 32
	01.04.2015, 20:21 [ТС]	3
	Не совсем то, необходимо что бы из файловой системы загружалась картинка (а именно мобильный телефон), а не менялся цвет на тот который нажимаешь. 0

@Okayguys 0 / 0 / 0 Регистрация: 19.06.2015 Сообщений: 7
	21.02.2017, 20:02	5
	По какой причине сайт меняет цвета (первый пример), а картинки менять не хочет? Прошу помочь. Могу скинуть сайт, если надо. (в консоли никаких ошибок нет) Может какая-то альтернатива есть, чтобы протестировать. Я потому что не нашел. 0