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.

Ascension

is [this][1] what you're looking for? If so this should be marked as a duplicate [1]: https://mcmap.net/q/276064/-custom-cursor-image-css – Axis

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

Answer 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

Aha

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

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

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

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

Answer 2

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

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

Constringent

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

Idio

Answer 4

I have a way you can change a file to a .cur file: https://convertio.co/png-cur/

Watersoak

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Gibbeon

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Changeling