Javascript custom cursor

Question

I try to figure out how to make simple Javascript custom cursor. I find couple Advanced lvl scripts, but that's not what i looking for. I will love to understand most simple way to do it in pure Javascript. I read couple of discussions here and other forums but nothing is working for me.

element.style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif'), auto";

Does your element have a width and height setting? If the element is 0 x 0, it wouldn't work. Also, it needs to have content inside it. — Kavelin
– Kavelin, Commented Aug 22, 2019 at 19:58
It might actually be easier to convert your GIF to a .cur file and then use CSS to get your custom cursor working. — Robby
– Robby, Commented Aug 22, 2019 at 20:05
Maybe that website image is presenting hotlinking - tried to set as the src for your profile image on this page, but the image failed to load. I don't think there is anything wrong with your javascript. — Mark Fisher
– Mark Fisher, Commented Aug 22, 2019 at 20:39

tom · Accepted Answer · 2019-08-22 20:45:28Z

3

What you are trying is working if you load the external image within a page with the same protocol (http).

Save the image in your web app and load it from your own domain.

I found this page http://www.webpage-maker.com/

open the console and put this in:

document.querySelector('#container').style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif'), auto";

answered Aug 22, 2019 at 20:45

tom

11k6 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Home Office Over a year ago

I try couple of thinks, if i make my own page/localhost or host its working. But what i mean more is make custom cursor for google.com page or similar. Not mine.

Collectives™ on Stack Overflow

Javascript custom cursor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related