Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2012, 06:17
Новичок на форуме
Отправить личное сообщение для MaxC Посмотреть профиль Найти все сообщения от MaxC
 
Регистрация: 06.03.2011
Сообщений: 2

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

Буду благодарен за любые решения.
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2012, 06:39
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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/)
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2012, 22:32
Новичок на форуме
Отправить личное сообщение для MaxC Посмотреть профиль Найти все сообщения от MaxC
 
Регистрация: 06.03.2011
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Смена картинки при наведении курсора Heidel jQuery 1 06.11.2012 22:03
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 12:59
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22
установка позиции курсора или выделения в iframe mister_maxim Events/DOM/Window 5 18.04.2009 10:43