Как наложить картинку на картинку и менять при клике на элемент?
Добрый день! Нужно, при клике на цвет, менять основание и контур товара. Я так понимаю, что картинка состоит из 2х слоёв и каждый накладывается при выборе.
Дело в том, что я не знаю как это реализовать. Я далёк от программирования, а данная функция просто необходима на сайте. Подскажите пожалуйста, как это сделать?
Просто используйте возможности css, а именно обратите внимание на свойство position: absolute и z-index. Подготовьте слои и при помощи JS тасуйте как хотите.
Если есть возможность отрисовать коврик в svg, то можно будет потом с помощью javascript менять значение атрибутов fill(цвет коврика), stroke(цвет окантовки) и даже можно анимировать. Встраивание svg позволит избежать большого количества изображения (в вашем случае 88 шт) это даст прирост в скорости загрузки страницы. Также проще будет добавить новый цвет.
P.S. Ниже меня поправили.
frontend queen, 8 цветов коврика и 11 цветов канта. 8х11 = 88 шт. Это если не разделять изображения коврика и канта.
Но как заметил Арсений Матыцин я ошибся в своем первом сообщении насчет загрузки изображений. Мы будем сразу грузить либо два изображения, либо одно объединенное. А остальные будут подгружаться по требованию
вариантов куча. например, на кнопки с цветами навешивать data-color, а потом уже его отлавливать и менять состояние "коврика"
этот хорош еще и потому, что у вас наверняка будет форма, а данные о нужной расцветке нужно как-то передавать
А нет случайна скрипта в котором это реализовано? А то я скрипт здесь на форуме находил, как картинку менять при клике на элемент, а вот как в моем случаем сделать не совсем понятно для меня это темный лес если честно.
У меня есть 8 цветов коврика в формате png и от отдельно 11 вариантов канта так же в формате png. И мне нужно наложить один файл на другой с вариантом выбора каждого. Вот только ней пойму как.
Тогда вам нужен https://freelance.habr.com/ где за вас напишут необходимый вам код.
Тут вам наврятли помогут. Для того чтобы написать функционал (js) для смены изображений нужен html и css код, а также ссылки на изображения. Универсальный js скрипт без привязки к html коду написать в данном случае не возможно. А полностью весь код (html\css\js) за бесплатно скорее всего никто вам не напишет.
Либо платите, либо давайте код
