Подмена фрагментов изображений, чем реализовать?

Question

[Марат Царик]

Здравствуйте . Всех с Новым Годом. Большинство ещё празднует, а я с вечера 30.12 до сих пор сижу и думаю как реализовать такую задачу : Есть 2 картинки, по сути одинаковые. Они могут быть в SVG или JPG , нет значения. На одном дом без света в окнах. На другом изображении есть свет. Необходимо сделать так - при наведении на этаж/окно все окна на этаже будут освещены. (то есть часть первого изображения заменяется часть другого). Мне понравилась реализация на этом сайте : dom-renaissance.ru/plans/korpus1/section4
Моя задача несколько проще, но реализовать хотелось бы именно таким способом как у них. Проблема в том, что я новичок в программировании. Изучаю веб разработку менее чем пол года. Изучил основы, но пока не достаточно практики, что бы изучать другие сайты и понимать как устроена логика у них.
Прошу Вас, Общество умеющих и знающих, помогите новичку указав хотя бы на то, что необходимо гуглить на эту тему. Плагины , библиотеки, готовые решения или просто саму суть, как это написать на чистом JS (хватит одной теории)

ЗЫ: Заранее благодарен за Ваши ответы. Весёлых праздников!)

Comments

[Марат Царик]

Было бы замечательно , если бы была возможность замены , например, через map / area . Что бы при наведении на определённую область (area) - изображение в ней менялось на такую же по координатам область , только с другого изображения. Элементов у меня не так уж и много. С лёгкостью разобью всё вручную через специальные сайты-сервисы. Суть вопроса - способ реализации самой замены

Answer 1

[Алексей Лебедев]

Делаем 2 картинки, одна фоновая, другая hover, при наведении меняем на hover.
Верстаем блоками по этажам.
Пример блок 1 этаж:
background нужные координаты картинки, при hover меняем background-url со светом

Comments

[Марат Царик]

Хорошее и простое решение, спасибо. Проблема в том, что у меня формы блоков будут очень не стандартные, по этому такой способ , к сожалению, не подходит. Но спасибо за ответ!)

[trushka]

Можно блоки сделать на svg (path или polygon) тогда можно любую форму.

[Марат Царик]

trushka: спасибо, а можно по подробнее? Где об этом можно почитать? Я ещё совсем новичек

Answer 2

[Dark Hole]

Можно использовать тег canvas и JavaScript

Comments

[Марат Царик]

Спасибо. Пробовал. Проблема в том, что надо ставить тег канвас с позишн абсолют над элементом. Отрисовывает хорошо. Но у канвы есть минус. Проблема с адаптацией. Если решать через канву - тогда надо будет рисовать map и area с координатами. Проблем в этом нет. Координат не много, сделаю вручную быстро. Дело в том, что в случае, если надо будет уменьшить/увеличить изображение надо будет менять все координаты. Я пока не придумал функцию для этого) Вот и нашёл в инете способ через SVG думал, вдруг кто то ним пользовался

[Dark Hole]

Марат Царик: ну, для этого придумали относительные координаты)

[Марат Царик]

Dark Hole: ухты. А это как? Как закрасить весь canvas, кроме известных координат? вот тут задал вопрос по теме .

[Dark Hole]

Марат Царик: тут нужно посидеть над кодом, что бы понять, что вам нужно. С сферическим конем в вакууме помочь не могу)