Изменение курсора мыши на html-странице

Мне нужен способ изменения курсора мыши на html-странице. Я знаю, что это можно сделать с помощью css, но мне нужно иметь возможность изменять его во время выполнения, например, имея кнопки на странице, и когда они нажимаются, они меняют курсор на конкретную настраиваемую графику. Я думаю, что лучший (или единственный?) Способ сделать это через javascript? Я надеюсь, что есть способ сделать это правильно, который будет работать во всех основных браузерах. Буду очень признателен, если кто-нибудь сможет мне с этим помочь.

заранее спасибо


javascript css mouse-cursor
person Clox    schedule 31.07.2009    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Спасибо за ответы. Наконец-то у меня все заработало. Вот как я это сделал:

<html>
<head>
    <script type="text/javascript">
        function changeToCursor1(){
            document.body.style.cursor="url('cursor1.ani'),url('cursor1.cur'), default";
        }
        function changeToCursor2(){
            document.body.style.cursor="url('cursor2.ani'),url('cursor2.cur'), default";
        }
    </script>
</head>

<body>

    <form>
        <input type="button" value="Change to cursor 1" onclick="changeToCursor1()" /><br>
        <input type="button" value="Change to cursor 2" onclick="changeToCursor2()" />
    </form>
</body>

I found out that to get it to work in Firefox you must pass at least 2 choices of cursors, e.g. cursor="url('cursor1.cur'), default" Or else it wont work. Also, in Firefox it doesn't work with ani-cursors, only cur. Which is why I've put a cur after ani. The ani will show up in IE, the cur in Firefox.

Кто-нибудь знает, можно ли изменить курсор в IE без отображения предупреждения active-X и необходимости принятия пользователем?

person Clox    schedule 31.07.2009

arrow_upward
3
arrow_downward

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Пример внизу.

person Daniel A. White    schedule 31.07.2009

arrow_upward
1
arrow_downward

Это просто, если вы хотите сделать это только по ссылкам. Вот такой CSS:

a:hover { cursor: crosshair; } #this is when you mouseover the link
a:active { cursor: wait; } #this is the moment you click it

Поскольку: active не будет работать для других элементов, кроме a, вы можете использовать Javascript, заявленный Prestaul и scunliffe.

person Hurix    schedule 31.07.2009

arrow_upward
1
arrow_downward

Используя JQuery:

$('.myButton').click(function(){
    $(this).css('cursor', 'url(/url/to/cursor/image)');
});
person David Morabito    schedule 29.05.2011

arrow_upward
-1
arrow_downward 

//you can set all the normal cursors like this
someElem.style.cursor = 'progress';

Какой именно курсор вам нужен? ... может быть, есть вариант получше.

person scunliffe    schedule 31.07.2009