JavaScript how to change mouse cursor to an image?

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.

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

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

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

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

来源：https://stackoverflow.com/questions/10866471/javascript-how-to-change-mouse-cursor-to-an-image

标签

javascript