Как сделать эффект нажатия частей картинки?

Question

[vladimir percov]

Есть карта:
Задача:
Сделать эффект нажатия областей(область должна оставаться нажатой, пока не нажмут другую область).

Каким образом можно сделать подобный эффект? Пробовал JQuery MapHilight, но он умеет только подсвечивать области(как я понял, добавляя еще один слой поверх области). Можно ли наложить еще один слой, чтобы появлялся подобный эффект?

Заранее спасибо за советы.

Comments

[GreatRash]

А под какие браузеры нужна работоспособность вообще?

[vladimir percov]

GreatRash: Google Chrome, Mozilla Firefox, Internet Explorer, Safari.

[GreatRash]

Arhimed96: Версии только самые последние?

Answer 1

[Nikolay Talanov]

Вариант номер 1 - найти какое-нибудь полуготовое решение для работы с такими вещами. Думаю что на d3js.org такое уже сто раз решали, и есть какие-то готовые плагины.
Вариант номер 2 - по идее, если такую карту нарисовать в каком-нибудь Иллюстраторе, то там же можно будет её экспортировать в виде svg. После этого лишь надо будет "подчистить" этот свг и затем для областей (отдельные path элементы) добавлять класс через js, который будет их как то перекрашивать и делать прочую нужную вам магию (с возможностью использования transition и так далее).

Answer 2

[Igor Karachentsev]

Думаю это habrahabr.ru/post/127994 вам поможет

Answer 3

[Александр]

Если не хочется переделывать как выше советовали, то я бы еще рассмотрел вариант "по-старинке": ссылки через map на img, клики обрабатываются скриптом и подключают одну из заготовленных картинок с выделенной областью.

Плюсы:
1. Можно сделать произвольное выделение, хоть даже свечение на соседние области, это не повлияет на регионы, т.е. точно как сделал дизайнер.
2. Можно довесить различные css-переходы например.

Минусы:
1. Нужно сделать картинки по кол-ву областей, соответственно либо предзагрузку довешивать, либо крупный спрайт, в ПНГ в приведенном виде не должен быть сильно "тяжелым").
2. Не очень удобно поддерживать (например добавлять области).

Answer 4

[Дмитрий Шинкарь]

Советую использовать html атрибут map для этих целей, рассказывать много не буду, дальше расскажет - гугл...)