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

Question

[Егор Лавренов]

Имеется вот такая картинка (png , но с тем как конвертировать её в SVG я вроде разобрался )
Задача:
Сделать карту, чтобы при наведении на область была подсветка нужным цветом и появлялся текст с названием. Это все. Никак не могу разобраться, как же это сделать, подробной информации не нашел. Кто может помочь с этим вопросом? В идеале хоть в скайпе объяснить, либо тут ссылок накидать

Answer 1

[Alex Kyznetsov]

как по мне так проще найти готовое решение и допилить под свои нужды

Answer 2

[Дмитрий Дарт]

Открывает AdobeIllustrator и или отрисовываете или переводите из PNG в нём каким-либо способом карту так, что бы каждая область бал на отдельном слое (это важно).
У каждой области будет свой id, вам останется только прикрепить события к каждому id что бы область подсвечивалась при наведении и нажатии, т.е. как с обычным DIV'ом.
Как сохранить Как сохранить svg в Adobe Illustrator без выезда за монтажную область?

Answer 3

[Skellig]

1. Сгенерировать SVG с нужными контурами. Я бы не заморачивался с иллюстратором и обвел нужные участки при помощи этого сервиса: www.cssplant.com/clip-path-generator. На каждую polygon-область повесить общий класс и уникальный data-атрибут для идентификации (например, указываем id соответствующей надписи).
2. Сделать надписи и спозиционировать их абсолютно относительно карты. По умолчанию скрываем их.
3. На класс polygon-областей повесить обработчик события hover: считываем идентификатор области, показываем соответствующуую надпись и меняем цвет заливки и контура.

Comments

[Егор Лавренов]

Есть возможность с вами связаться?

Answer 4

[Vlad Dyukov]

вот тут посмотри как я делал.
думаю не сложно разобраться.

Comments

[Егор Лавренов]

Есть возможность связаться в скайпе \ телеграмме?

[Vlad Dyukov]

EgorWeb, напиши мне на почту.