-2

Как можно реализовать функцию смены изображений при выборе цвета на странице товара (данные о товаре занесены в бд)? Опишите алгоритм

Пример: https://www.maxfactor.com/ru-ru/eyes/mascara/2000-calorie-mascara?shade=Navy

1
  • А вы добавьте кнопку, добавьте два изображения и уже станет легче и детальнее.
    – Leonid
    Commented 8 дек. 2021 в 14:30

1 ответ 1

1

Можно как-то так. Записать адреса изображений в какой-нибудь атрибут кнопки (здесь - радио) и по клику (onchange) менять атрибут src изображению.

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

const checkboxes = document.querySelectorAll('input[name="color"]');
const img = document.querySelector('img');

checkboxes.forEach(checkbox => checkbox.addEventListener('change', setImageSrc));

function setImageSrc(e) {
  img.src = img.alt = e.target.value;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circle {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  display: inline-block;
  margin-left: -31px;
  pointer-events: none;
}

input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 5px;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.brown {
  background: brown;
}
<input type=radio checked name="color" value="blue-image-src">
<label class='circle blue'></label>
<input type=radio name="color" value="red-image-src">
<label class='circle red'></label>
<input type=radio name="color" value="brown-image-src">
<label class='circle brown'></label>

<img alt="blue-image-src" src="blue-image-src">

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.