Changing mouse-cursor on a html-page

javascript css mouse-cursor
Clox picture Clox · Jul 31, 2009 · Viewed 19.5k times · Source

I need a way of changing the mouse-cursor on a html-page. I know this can be done with css, but I need to be able to change it at runtime, like for instance having buttons on the page, and when they're clicked they change the cursor to a specific custom graphic. I think the best (or only?) way of doing this is through javascript? I hope there's a way of doing this nicely that will work on all of the major browsers. I would be very grateful if someone could help me with this.

Thanks in advance

Answer

Clox picture Clox · Jul 31, 2009

Thanks for the replies. I finally got it working. Here's how I did it:

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

Does anyone know if it's possible to change the cursor in IE without the active-X warning showing up and the user having to accept?

Related questions

assign color to mouse cursor using CSS

How can I assign color to the mouse cursor in a web-page? Can anyone suggest me a way to do it using any of the technologies e.g. HTML, CSS, JavaScript?

Read More
Global override of mouse cursor with JavaScript

In my web application I try to implement some drag and drop functionality. I have a global JavaScript component which does the the basic stuff. This object is also responsible for changing the mouse cursor, depending of the current drag …

Read More
When I click on a canvas and drag my mouse, the cursor changes to a text-selection cursor. How can I prevent this?

Here's a fiddle: http://jsfiddle.net/MZ9Xm/ Note: The following occurs in Chrome 22.0.1221.1, but not in Firefox 14.0.1. [Ubuntu linux] Move your mouse to the top canvas and press and hold the mouse button. Drag the mouse, and the cursor …

Read More