Эмуляция наведения курсора на <map>
Доброго времени, суток коллеги!
Нужна ваша помощь. Задача следующая. Имеется HTML: <img id="globe_img" usemap="#globe" src="images/globe_x2.png" width="917" height="953" alt="Глобус"> <map id="globe" name="globe"> <area shape="poly" coords="..." href="#" /> <area shape="poly" coords="..." href="#" /> </map> <div id="cursor" style="width:100px; height:100px"></div>DIV #cursor привязан с помощью mousemove() к курсору и двигается вместе с курсором. Сам курсор центрирон относительно дива #cursor что влечет за собой проблему - при наведении курсора на любой элемент не срабатывает события hover(), mousemove() и прочие связанные с мышкой. Как видно из кода, есть карта-изображений и необходимо чтобы срабатывал hover() для #globe_img (областей которые указаны в area) при наведение курсора. Т.е. как я понимаю нужно использовать событие mousemove() для #globe_img и передавать туда координаты курсора, но в mousemove() нельзя передать параметры. Что можете предложить? Вариант: #globe_img поднять выше #cursor не походит (приведенный тут пример очень упрощен на самом деле все сложнее, но нет смысла вас путать). P.S.: Вообще я использую библиотеку jQuery, может кто-то и на ней подскажет решение, хотя тут очень специфическая ситуация и я надеюсь что на уровне JS её можно решить. Буду благодарен за любые решения. |
Вот то, что я бы предложил в порядке приоритета:
1) Использовать css-свойство cursor: url(..) для задания своего курсора. Конечно если такой вариант подойдет. 2) div#cursor размещать ниже+правее курсора. Хотя вы б наверно так и сделали если бы можно было бы. 3) Заключить #globe_img и #cursor в один контейнер, тогда на нем всегда будет срабатывать событие mousemove 4) Раз #cursor как-то привязывается к мышке, стало быть вы улавливаете момент, когда курсор попадает на карту, и уходит с нее. Так в чем проблема выполнять какие-либо действия по mouseover(пусть и срабатывающем на #cursor) от и до? 5) Есть такое крайне полезное css-свойство - pointer-events: none; Позволяет сделать элемент невосприимчивым к событиям мышки. К сожалению работает (для html) только в Firefox и WebKit (Chrome, Safari...) 6) Есть такие вещи как document.createEvent, Event.initEvent, Element.dispatchEvent (http://habrahabr.ru/post/114244/) |
danik.js попробовал разные варианты, которые мне подходили. Остановился на pointer-events: none;. Огромная благодарность, удачи вам!
|
Часовой пояс GMT +3, время: 20:27. |