Изменение курсора мыши на html-странице - PullRequest
Новая
       22

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

7 голосов
/ 31 июля 2009

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

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

Ответы [ 6 ]

6 голосов
/ 31 июля 2009

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

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

Я обнаружил, что для того, чтобы заставить его работать в Firefox, вы должны пропустить как минимум 2 варианта курсоров, например, курсор = "url ('cursor1.cur'), ​​по умолчанию" Или это не будет работать. Кроме того, в Firefox он не работает с аниз-курсорами, только cur. Вот почему я поставил черт за ани. Ани появится в IE, а в Firefox.

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

3 голосов
/ 31 июля 2009
1 голос
/ 29 мая 2011

Использование JQuery: 

$('.myButton').click(function(){
    $(this).css('cursor', 'url(/url/to/cursor/image)');
});
1 голос
/ 31 июля 2009

Это просто, если вы хотите сделать это только по ссылкам. Там у вас есть немного 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.

0 голосов
/ 31 июля 2009 
// Get the element you want to change the cursor for
var el = document.getElementById('yourID');

// This image url is relative to the page url
el.style.cursor="url(pathToImage.png)";
0 голосов
/ 31 июля 2009 
//you can set all the normal cursors like this
someElem.style.cursor = 'progress';

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

...