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

Question

[Cool94]

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

Мб есть еще какие варианты реализовать такую вещь?

Answer 1

[Rustam Bainazarov]

SVG и только SVG.

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

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

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

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

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

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

Answer 2

[grinat]

https://codepen.io/solipsistacp/pen/Cbdeg

Answer 3

[Максим Сохряков]

Плагин mapplic
Достаточно удобно редактироват через json файл.
Есть js и wordpress плагины