Как сделать интерактивную карту?

Добрый день, нужно сделать интерактивную изображение-карту. Но есть один нюанс. При наведении на определенный участок, допустим, здание, он должен меняться. Т.е. изначально вся картинка черно-белая, при наведении, здание становится цветным.
Есть небольшой план реализации:
1. под низ поместить цветной вариант всей "карты", а на верх черно-белый
2. Разместить svg или просто блоки на места интерактивности
3. Скорее всего, такого нету, но все же: мб есть такая возможность частично делать блок или изображение прозрачным, чтобы в данном месте был виден нижний слой?
3а. Альтернативой видится - нарезать нужные цветные части целой "карты" и разместить их в прозрачных блоках в нужных местах, а при наведении убирать opacity. Но тут нужно будет пиксель пиксель их размещать, что при адаптивности может создать проблем.

Мб есть еще какие варианты реализовать такую вещь?
5c363747e3332163909890.jpeg
  • Вопрос задан
  • 162 просмотра
Пригласить эксперта
Ответы на вопрос 2
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
SVG и только SVG.

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

Кроме того, блоки на HTML не могут иметь произвольную форму, а только прямоугольную (clip-path не в счёт, с ним ещё сложнее будет реализовать), что вызовет проблемы при совмещении нескольких объектов произвольной формы вместе. Точнее, будет проблема с зоной взаимодействия этих объектов при наведении мышки из-за наложения прямоугольников.

Все такие интерактивные карты делают с помощью SVG, что как бы намекает.

https://medium.com/@mattcroak718/creating-an-inter...

Я делал такую карту с помощью Boxy SVG:
https://boxy-svg.com

Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы