Как можно реализовать функцию смены изображений при выборе цвета на странице товара (данные о товаре занесены в бд)? Опишите алгоритм
Пример: https://www.maxfactor.com/ru-ru/eyes/mascara/2000-calorie-mascara?shade=Navy
Как можно реализовать функцию смены изображений при выборе цвета на странице товара (данные о товаре занесены в бд)? Опишите алгоритм
Пример: https://www.maxfactor.com/ru-ru/eyes/mascara/2000-calorie-mascara?shade=Navy
Можно как-то так. Записать адреса изображений в какой-нибудь атрибут кнопки (здесь - радио) и по клику (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">