MindMinimal
@MindMinimal
Front-end Developer, веб-разработчик

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

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

thumb.png



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



oblas.png



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



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

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

imagemap я бы не использовал. Слишком сложные формы у областей, слишком трудоемко.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
dpigo
@dpigo
Front-end developer
Возможно это поможет:
stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap

Там в ответах обсуждается плагин для jQuery и вариант реализации через svg и xslt
Ответ написан
Комментировать
dima_horror
@dima_horror
Посмотрите, это то что Вы ищете?
bcrl.org.ua/map.html
Я такое реализовывал. Если это именно то, я расскажу.
Ответ написан
Комментировать
@Makito
Сделайте ваше изображение карты бэкграундом к блоку нужной ширины и высоты, сверху абсолютом положите картинку однопиксельного прозрачного гифа, которую растяните на всю ширину и высоту, и уже к этой картинке примените карту imagemap, тогда курсор будет адекватно реагировать только на контурную часть area, а закрашенную область показывайте ниже этого слоя прозрачного гифа.
Это если делать на maparea. Но проще сделать на raphaeljs, там и манипуляции с данными можно просто делать и грузить данные в json и много всяких плюшек.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы