JavaScript how to change mouse cursor to an image?

Question

I've seen examples where you can change it to preset images that your operating system has; example:

$('body').css('cursor', 'wait');

But how about my own /img/my_image.png?

Thanks for any help.

is [this][1] what you're looking for? If so this should be marked as a duplicate [1]: http://stackoverflow.com/questions/336925/custom-cursor-image-css — Yevgeny Simkin, Jun 02 '12 at 22:42
Probably. I see the code "a.heroshot img { cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in; }", but I'm not sure how to implement it. What I have now is a button, and when clicked, I have a function handling that. Within that function I want to change the cursor to an image, but I'm not sure how to use this code. — JDS, Jun 02 '12 at 22:46

score 26 · Answer 1 · edited Sep 24 '20 at 04:44

26

You can, by specifying a url to it in CSS:

div {
    cursor: url(smiley.gif), url(myBall.cur), auto;
}

See http://www.w3schools.com/cssref/pr_class_cursor.asp

edited Sep 24 '20 at 04:44

Richie Bendall

7,738
4
38
58

answered Jun 02 '12 at 22:41

malangi

2,692
4
28
42

5

Uhg... w3schools. Have a different reference? +1 nevertheless. – Jun 02 '12 at 22:43
Hey so does this mean whenever my mouse is inside this particular DIV, the cursor will be different? Also, I don't have .cur files, I just have a .png image --- EDIT: is the whole idea to just edit the CSS of the containing view (div, body, etc)? – JDS Jun 03 '12 at 00:22
As I understand it, you should be able to to use your png too. Just make sure the is valid. Yup, that is the idea (so you could do it for the `body` tag). – malangi Jun 03 '12 at 02:23
13

never got it... why is w3schools considered to be a bad reference? – Arturo Jan 06 '14 at 13:44

score 6 · Answer 2 · answered Apr 11 '14 at 06:06

6

The Jquery way to set a custom cursor (or default cursor as a fallback):

$('selector').css({'cursor': 'url(/cursors/customMoveCursor.cur), default'});

answered Apr 11 '14 at 06:06

Kalle

2,157
1
22
21

score 3 · Answer 3 · answered Jun 03 '12 at 05:08

I don't usually link external articles, but this one covers your needs. I've copied the relevant stuff here for persistence.

#dragMe {
    cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
            url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
            move;                                       /* Older browsers     */
}

Credit: http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

Don't forget to consider accessibility when making your custom cursors! Cheers :)

JavaScript how to change mouse cursor to an image?

3 Answers3

Linked