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

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

Мб есть еще какие варианты реализовать такую вещь?
5c363747e3332163909890.jpeg
  • Вопрос задан
  • 330 просмотров
Решения вопроса 3
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть
SVG и только SVG.

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

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

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

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

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

Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.
Ответ написан
maximsohryakov
@maximsohryakov
MiMEKiZ
Плагин mapplic
Достаточно удобно редактироват через json файл.
Есть js и wordpress плагины
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
UMA.TECH Москва
от 150 000 до 215 000 руб.
Sirena Bus Москва
от 70 000 до 150 000 руб.
RUVOD Москва
До 150 000 руб.