Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Эмуляция наведения курсора на <map> (https://javascript.ru/forum/dom-window/33485-ehmulyaciya-navedeniya-kursora-na-map.html)

MaxC 25.11.2012 06:17

Эмуляция наведения курсора на <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 её можно решить.

Буду благодарен за любые решения.

danik.js 25.11.2012 06:39

Вот то, что я бы предложил в порядке приоритета:

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/)

MaxC 27.11.2012 22:32

danik.js попробовал разные варианты, которые мне подходили. Остановился на pointer-events: none;. Огромная благодарность, удачи вам!


Часовой пояс GMT +3, время: 19:33.