курсор: захват мыши javascript

У меня есть два изображения: одно с открытой ладонью, другое с хватающей рукой. Я надеялся, что простые функции «onmousedown» и «onmouseup» помогут сделать знаменитую хватающую руку, которую вы можете увидеть в чем-то вроде карт Google. НО... Извините, с самого начала: у меня есть простой DIV, в котором ничего нет, кроме его фона. когда я удерживаю мышь и начинаю «перетаскивать» курсор, функция должна запуститься и изменить форму курсора «открыть руку» на «захват руки». Но курсор стал селектором текста вместо того, что я хочу. Любая помощь? это пример

<div onmousedown="function(){this.style.cursor='url(handgrab.png)'}"
onmouseup="function(){this.style.cursor='url(handopen.png)'}"
</div>

единственное, что я хочу, это изменить курсор при перетаскивании мыши в DIV. извините за этот встроенный выбор, но я не хочу писать весь файл JS...


javascript drag cursor mousedown
person Nereo Costacurta    schedule 27.10.2012    source источник
comment
Хорошо, ребята, я нашел большую проблему: для div я должен установить событие onselectstart в null (или вернуть false). Игра сделана! Надеюсь, это будет полезно для других, увидимся   -  person Nereo Costacurta    schedule 30.10.2012

Ответы (1)


arrow_upward
-1
arrow_downward

Вы должны получить доступ к этому через имя класса. Это облегчает жизнь.

Попробуйте так: -

HTML:

<div onmouseup="this.className='openHand'" onmousedown="this.className='closeHand'">
    Mouse Down and Up Events
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.​openHand​ {
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

.closeHand {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}​

См. ЖИВОЕ ДЕМО

person Siva Charan    schedule 27.10.2012
comment
благодаря ответам. У меня были некоторые проблемы, потому что: 1) при перетаскивании мышью на div с фоном много раз FireFox брал изображение вместо курсора изменения, но иногда это работало. 2) никак с гугл хромом не появляется закрытая рука. 3) кажется, что только IE9 работает правильно... невероятно - person Nereo Costacurta; 29.10.2012