Задать вопрос
@Mks163
html

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

Друзья всем привет! Есть картинка с планом земельных участков, при клике на участки будет выпадать модальное окно с информацией по ним. Как лучше всего это реализовать на статичном jpg изображении (именно разбивку на отдельные области в этом же изображении) ? Вот пример изображения:
5c0a5b898ae9b869139183.jpeg
  • Вопрос задан
  • 1061 просмотр
Комментировать
Подписаться 3 Средний Комментировать
Решения вопроса 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
Новичок
htmlbook.ru/html/area
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нписать индикатор на языке Pine Script для TradingView
22 дек. 2024, в 13:01
50000 руб./за проект
Игра С# MVC console + wpf
22 дек. 2024, в 10:44
15000 руб./за проект
Извлечь данные из архива
22 дек. 2024, в 10:12
10000 руб./за проект
Ещё заказы