Question

65

Changing mouse-cursor on a html-page

rated 0 times [ 68] [ 3] / answers: 1 / hits: 21347 / 15 Years ago, fri, july 31, 2009, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesseh

Add To Favorites

Follow

Total Points: 579

Total Questions: 98

Total Answers: 99

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

jesseh questions

1 What is instantSearchSDKJSBridgeClearHighlight?

Mon, Sep 20, 21, 00:00, 3 Years ago

1 Material-UI TextField loses focus on every onChange

Mon, Mar 22, 21, 00:00, 3 Years ago

1 Angular 8 => Condition : show an else value

Wed, Aug 21, 19, 00:00, 5 Years ago

1 Get HTML from database into React

Mon, Jan 21, 19, 00:00, 5 Years ago

1 puppeteer wait for page/DOM updates - respond to new items that are added after initial loading

Wed, Jan 9, 19, 00:00, 5 Years ago

View All

answered 15 Years ago mahogany · Accepted Answer

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?