Html как сделать интерактивную карту объекта?

Question

[Alexandr Sulimov]

Потребовалось сделать интерактивную карту (например план квартиры сверху) где общий план нарисована мебель, техника. Нужно чтобы объекты подсвечивались, были кликабельны. Очень желательно не flash.

Вопросы
1. на базе каких технологий такое делается?
2. какие способы создать из картинки плана "нарезанные" слои?

Answer 1

[Константин Чухломин]

SVG (слои, группы объектов) + CSS (подсветка) + JS (событие на клик по элементу внутри SVG).

Comments

[Alexandr Sulimov]

А простой технологии/процесса/ПО для нарезки картинки на слои, не подскажете?

[Константин Чухломин]

Alexandr Sulimov: Нарезки — вряд ли. Думаю, подойдет любой верткой редактор: Inkskape / Sketch (OS X only). Да можно хоть блокнот взять :-)

Answer 2

[twixoff]

davidlynch.org/projects/maphilight/docs работает с SVG либо с картой для изображений (тег map).
Для нарезки областей на карте есть он-лайн сервис, адреса не помню, но нагуглить можно.

Answer 3

[Сергей]

xn--h1aah0a.xn--p1ai/a Можешь посмотреть как сделано тут в меню возможности, тоже интересный способб

Answer 4

[Алексей]

Вопрос старый, но вдруг кто-то еще ищет как это сделать.

Интерактивная карта за 20 минут без плагинов и библиотек: https://www.youtube.com/watch?v=CurYICWI0T8