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

Всем привет.
60d9a9ab0f5c5085426632.png
Есть такой макет, есть литеры, по наведению дом должен подсвечиваться.
А по клику должен открываться модальное окно.
Какими технологиями пользоваться для достижения цели ?
  • Вопрос задан
  • 881 просмотр
Пригласить эксперта
Ответы на вопрос 5
SeaInside
@SeaInside
15 лет пилю все эти штуки
Насоветуют... Менять бэкграунды - забудьте. 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/
В конце интерактивный пример есть.
Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.
Ответ написан
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
В Adobe Illustrator нарисовать поверх корпусов контуры и таблички и инфой, сохранить копию как.. SVG. Взять код и вставить в HTML. Отображать поверх растровой картинки.

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

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


А вот здесь можно без SVG редактора просто мышкой покликать по картинке чтобы получить координаты для контура.
jsfiddle.net/Stalk/kLvnc9ru
Ответ написан
Комментировать
@33remido
я бы отслеживал позицию курсора и просто менял бы бэкграунд на картинку, где дом подсвечен. Но наверное это слишком ресурсоемко
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы