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.

Solution 1

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

Solution 2

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

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

Solution 3

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

Comments

[Admin]

Uhg... w3schools. Have a different reference? +1 nevertheless.

[JDS]

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

[malangi]

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

[Atharva Johri]

never got it... why is w3schools considered to be a bad reference?