Как оживить картинку?

Question

[jamster]

Всем привет.

Есть такой макет, есть литеры, по наведению дом должен подсвечиваться.
А по клику должен открываться модальное окно.
Какими технологиями пользоваться для достижения цели ?

Comments

[posters]

Как вариант, гуглим html map area generator. Вешаем на это скрипт, который будет поверх накладывать подсвеченный дом картинкой и вызывать модальное окно.

[RAX7]

Как сделать интерактивный генплан застройки,?

Answer 1

[Максим Морев]

Насоветуют... Менять бэкграунды - забудьте. HTML area - тоже похоронить.

Берёте вашу картинку. Поверх зданий создаёте векторный путь (обводите здания).
Размечаете нарисованные пути как вам удобно, достаточно будет повесить класс для дальнейшей стилизации по ховеру + в дата-атрибуты значимую информацию для тултипа/клика/что там ещё.

<svg ...>
  <path class="area" data-id="1" d="..." />
  <path class="area" data-id="2" d="..." />
</svg>

Инлайните получившуюся конструкцию на страницу. Фон можно в отдельном элементе и карту поверх, можно прямо в SVG зашить - не суть важно.

По ховеру на путь - через CSS делаете ему полупрозрачную заливку, у вас судя по картинке сплошным цветом просто заполняется при наведении - самый простой вариант.

По клику на путь - достаёте его `data-id` и выводите какую-либо информацию.

Вот пример статьи, где описано более подробно.
https://css-tricks.com/svg-map-rollovers/
В конце интерактивный пример есть.
Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.

Answer 2

[Сергей Соколов]

В Adobe Illustrator нарисовать поверх корпусов контуры и таблички и инфой, сохранить копию как.. SVG. Взять код и вставить в HTML. Отображать поверх растровой картинки.

Дать id фигурам контуров и табличек. Не перепутать, как это сделал я: таблички вылезают не для тех контуров.

JS может обращаться по этим id к элементам SVG как к обычным HTML-элементам, и слушать на них события. По наезду мышки подсвечивать контур, показывать табличку ярче:

Comments

[jamster]

Вот это топ конечно.

[jamster]

я сделал мудреннее, 3 канвас слоя, соответственно, каждый из слоя прорисовывает либо наведение, либо плашку. над литером. Всё бы хорошо, но таблички так не нарисуешь, да там ещё и ховер эффект.

Answer 3

[Артем]

Готовое решение с исходниками

Comments

[Анастасия]

уверен, что при наведении на подсказу выделение должно слетать?

[Артем]

Анастасия, спасибо, поправил=)

[Анастасия]

Артем, нет. ещё раз глянь. попробуй от левого верхнего угла провести в нижний правый угол

Answer 4

[Stalker_RED]

В svg фоном ставите свою картинку, поверх домов размещаете контуры
вот элементарный пример:


А вот здесь можно без SVG редактора просто мышкой покликать по картинке чтобы получить координаты для контура.
jsfiddle.net/Stalk/kLvnc9ru

Answer 5

[33remido]

я бы отслеживал позицию курсора и просто менял бы бэкграунд на картинку, где дом подсвечен. Но наверное это слишком ресурсоемко