Как сделать выделение отдельных областей на статичном изображении карты?

Друзья всем привет! Есть картинка с планом земельных участков, при клике на участки будет выпадать модальное окно с информацией по ним. Как лучше всего это реализовать на статичном jpg изображении (именно разбивку на отдельные области в этом же изображении) ? Вот пример изображения:
5c0a5b898ae9b869139183.jpeg
  • Вопрос задан
  • 929 просмотров
Решения вопроса 1
@AlexRas
Можно area:
htmlbook.ru/html/area

Можно обычные ссылки:
https://jsfiddle.net/7s69g4ky/

Можно svg:
https://habr.com/post/127994/

Вот еще какой-то пример:
https://codepen.io/CreativeSeo33/pen/YwepVQ
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
vman
@vman
через image map, есть сервисы по созданию оных

<html>
    <body>
        <img width="500" height="200" usemap="#somemap" src="upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png">
        <map name="somemap">
            <area shape="rect" coords="6, 7, 140, 196" href="ru.wikipedia.org/Прямоугольник">
            <area shape="circle" coords="239, 98, 92" href="ru.wikipedia.org/Круг">
            <area shape="poly" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74, 386,16" href="ru.wikipedia.org/Многоугольник">
        </map>
    </body>
</html>
Ответ написан
Комментировать
Chefranov
@Chefranov
Новичок
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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