Как на изображение повесить изображения при наведении?

Question

[Mark]

Всем привет!
Как сделать чтобы на изображении появлялись еще изображения при наведении?
Например есть планировка квартир при наведении на определенную квартиру появляется обводка, в моем клучае изображения .png.
И при масштабировании экрана, это все должно уменьшаться/увеличиваться без сбоя в координатах/выделяемой области.
Как-то так.

Comments

[Сергей delphinpro]

План квартиры рисуется в svg, там же рисуются накладываемые элементы. А дальше с svg элементами работает обычный ховер.

[Mark]

Сергей: svg Тоже есть, а как наложить на определенную точку/координату?

[Максим]

Mark: в google напишите , html map и любая ссылка будет правильной .. загружаешь img и указываешь координаты .. просто водишь по нужным местам на изображении .. то где будешь водить и будетarea приhover

[Сергей delphinpro]

Mark: Примерно так https://codepen.io/anon/pen/dWZWJM

[Максим]

Сергей: это если фигура простейшая , а если отрисовка сложного ландшафта или целого этажа в доме ?

[Сергей delphinpro]

Максим Ленский: ландшафт или этаж рисуется в люстре. потом руками немного редактируется svg.
Можно две svg сделать и вторую положить абсолютом на первую. Во второй всяко будут примитивы.

[Максим]

Сергей: я понимаю что illustrator но чел то не сведущ и по тому html map в google , там ручками и просто до безумия

[Сергей delphinpro]

Максим Ленский: Иллюстратор в общем-то не нужно знать =) Это задача дизайнера.
Я делал такие планы не раз. И в люстре только прозрачные области появляющиеся при наведении рисовал. Контур пером нарисовать не сложно.
А вот html map я бы не сказал что легко. Ну то есть это легко, но определять/задавать координаты тот еще геморройчик. Уж всяко не проще чем пером в люстре нарисовать =)

Answer 1

[xtala zen]

Логичнее воспользоваться возможностями SVG
https://habrahabr.ru/post/127994/