Реагирование курсора на прозрачные пиксели или формы (SVG/PNG)?
Собственно есть карта:
Необходимо разместить на карте области, чтоб они реагировали на границы областей. Т.е. первый вариант сделан через imagemap. Дальше скриптом думаю подтягивать через области div'ы сверху. Но получаетьс проблема. Если вставлять div, то он прямокутен или квадратен, тогда на ховер не реагируют другие области. Вопрос в том, возможно ли поставить SVG области или PNG так, чтоб курсор реагировал только на обьект, где есть заливка. (Не реагировал на прозрачные области или области где нет шейпа)
Т.е. реагировать на обьект, но не реагировать на зону где красные стрелки.
Я делал грубо говоря то же самое с помощью raphaeljs.com/ (это SVG). В Illustrator'е делал нужные шейпы, экспортировал в SVG. А Raphael'ем отрисовывал. Прекрасно поддерживаются события, в т.ч. клик, ховер. Если хотите, я даже могу вам отправить, что у меня получилось.
С помощью canvasэто тоже можно сделать.
imagemap я бы не использовал. Слишком сложные формы у областей, слишком трудоемко.
Спасибо, посмотрел, вроде то что надо. Можете то отправьте то что делали для примера. Хотел бы плюсануть но кармы нету. В будущем + за мой счет. Спасибо еще раз
Сделайте ваше изображение карты бэкграундом к блоку нужной ширины и высоты, сверху абсолютом положите картинку однопиксельного прозрачного гифа, которую растяните на всю ширину и высоту, и уже к этой картинке примените карту imagemap, тогда курсор будет адекватно реагировать только на контурную часть area, а закрашенную область показывайте ниже этого слоя прозрачного гифа.
Это если делать на maparea. Но проще сделать на raphaeljs, там и манипуляции с данными можно просто делать и грузить данные в json и много всяких плюшек.
Простой
