Как наложить картинку на картинку и менять при клике на элемент?

Question

[Tempter06]

Добрый день! Нужно, при клике на цвет, менять основание и контур товара. Я так понимаю, что картинка состоит из 2х слоёв и каждый накладывается при выборе.
Дело в том, что я не знаю как это реализовать. Я далёк от программирования, а данная функция просто необходима на сайте. Подскажите пожалуйста, как это сделать?

Answer 1

[Надим]

Просто используйте возможности css, а именно обратите внимание на свойство position: absolute и z-index. Подготовьте слои и при помощи JS тасуйте как хотите.

Answer 2

[Александр Епихин]

Если есть возможность отрисовать коврик в svg, то можно будет потом с помощью javascript менять значение атрибутов fill(цвет коврика), stroke(цвет окантовки) и даже можно анимировать. Встраивание svg позволит избежать большого количества изображения (в вашем случае 88 шт) это даст прирост в скорости загрузки страницы. Также проще будет добавить новый цвет.
P.S. Ниже меня поправили.

Comments

[frontend queen]

о каких картинках речь?

[Арсений Матыцин]

Мои соболезнования, если при реализации данной задачи через замену имаг вы собрались грузить их все.

[Александр Епихин]

frontend queen, 8 цветов коврика и 11 цветов канта. 8х11 = 88 шт. Это если не разделять изображения коврика и канта.
Но как заметил Арсений Матыцин я ошибся в своем первом сообщении насчет загрузки изображений. Мы будем сразу грузить либо два изображения, либо одно объединенное. А остальные будут подгружаться по требованию

[Максим]

Александр Епихин, дело в том что как раз на svg это доступно

[Александр Епихин]

Максим Ленский вы о чем?

[Максим]

Александр Епихин, ...а блин выже сами написали о svg ....сорри лоханулся ...или вы не знаете как в svg это делается ?

[Александр Епихин]

Знаю. Моя ошибка была в том что я написал якобы использование svg в данном случае позволит не загружать сразу 88 растровых изображений.

Answer 3

[frontend queen]

вариантов куча. например, на кнопки с цветами навешивать data-color, а потом уже его отлавливать и менять состояние "коврика"
этот хорош еще и потому, что у вас наверняка будет форма, а данные о нужной расцветке нужно как-то передавать

Answer 4

[Tempter06]

А нет случайна скрипта в котором это реализовано? А то я скрипт здесь на форуме находил, как картинку менять при клике на элемент, а вот как в моем случаем сделать не совсем понятно для меня это темный лес если честно.

Comments

[Tempter06]

У меня есть 8 цветов коврика в формате png и от отдельно 11 вариантов канта так же в формате png. И мне нужно наложить один файл на другой с вариантом выбора каждого. Вот только ней пойму как.

[Надим]

Tempter06, я вам уже писал выше, используйте position: absolute и z-index!

[Александр Епихин]

Tempter06 оформите html и css код в codepen.io и попробуйте начать писать js. Далее вам подскажут

[Tempter06]

Александр Епихин, спасибо, но к сожалению код я написать не смогу.

[Александр Епихин]

Тогда вам нужен https://freelance.habr.com/ где за вас напишут необходимый вам код.
Тут вам наврятли помогут. Для того чтобы написать функционал (js) для смены изображений нужен html и css код, а также ссылки на изображения. Универсальный js скрипт без привязки к html коду написать в данном случае не возможно. А полностью весь код (html\css\js) за бесплатно скорее всего никто вам не напишет.
Либо платите, либо давайте код

[Tempter06]

Спасибо за совет, а то я в этом деле новичок и перерыл уже весь интернет с этим вопросом