Реагирование курсора на прозрачные пиксели или формы (SVG/PNG)?

Question

[Роман Мисюра]

Собственно есть карта:





Необходимо разместить на карте области, чтоб они реагировали на границы областей. Т.е. первый вариант сделан через imagemap. Дальше скриптом думаю подтягивать через области div'ы сверху. Но получаетьс проблема. Если вставлять div, то он прямокутен или квадратен, тогда на ховер не реагируют другие области. Вопрос в том, возможно ли поставить SVG области или PNG так, чтоб курсор реагировал только на обьект, где есть заливка. (Не реагировал на прозрачные области или области где нет шейпа)







Т.е. реагировать на обьект, но не реагировать на зону где красные стрелки.



jsfiddle.net/DgThK/

Answer 1

[krasulya]

Я делал грубо говоря то же самое с помощью raphaeljs.com/ (это SVG). В Illustrator'е делал нужные шейпы, экспортировал в SVG. А Raphael'ем отрисовывал. Прекрасно поддерживаются события, в т.ч. клик, ховер. Если хотите, я даже могу вам отправить, что у меня получилось.

С помощью canvasэто тоже можно сделать.

imagemap я бы не использовал. Слишком сложные формы у областей, слишком трудоемко.

Comments

[Роман Мисюра]

Спасибо, посмотрел, вроде то что надо. Можете то отправьте то что делали для примера. Хотел бы плюсануть но кармы нету. В будущем + за мой счет. Спасибо еще раз

[krasulya]

www.dropbox.com/sh/v6f1o1zgtl3omu5/aJ9PJirvP3

Вам нужен map.html

[Роман Мисюра]

Еще раз спасибо

Answer 2

[Anton Bobylev]

Возможно это поможет:
stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap

Там в ответах обсуждается плагин для jQuery и вариант реализации через svg и xslt

Answer 3

[dima_horror]

Посмотрите, это то что Вы ищете?
bcrl.org.ua/map.html
Я такое реализовывал. Если это именно то, я расскажу.

Answer 4

[Makito]

Сделайте ваше изображение карты бэкграундом к блоку нужной ширины и высоты, сверху абсолютом положите картинку однопиксельного прозрачного гифа, которую растяните на всю ширину и высоту, и уже к этой картинке примените карту imagemap, тогда курсор будет адекватно реагировать только на контурную часть area, а закрашенную область показывайте ниже этого слоя прозрачного гифа.
Это если делать на maparea. Но проще сделать на raphaeljs, там и манипуляции с данными можно просто делать и грузить данные в json и много всяких плюшек.