I want to Style my cursor in JS with an image file on my computer

#1

Hey, I am trying to style my cursor using Javascript only as shown below;

<script>
 window.addEventListener("click",
function(){
document.body.style.cursor="url('../img/point.svg'),pointer";
</script>

It does not find my file URL for some reason and just moves on to the default that I set(pointer).
Please Help!

#2

Try setting the cursor style directly in your CSS body{}. Then if that doesn’t work, use the full URL.
If you get it working in the CSS the problem is not the link but dynamically setting the cursor.
The request for the SVG file will take a minimum 500ms to fetch and parse. In that time the browser will default back to the pointer because you are using the mouse and it needs an icon immediately.
Usually CSS is parsed before HTML and DOMContentLoaded.
Why do you need to change the icon on click?

Another way might be to add a class to the body on the click event that changes the cursor style.
Then maybe setTimeout and remove the class.
That way the SVG has already been loaded before the click event. e.g.
window.addEventListener(‘click’ () => document.querySelector(‘body’).classList.add(‘clicked’))
window.addEventListener(‘click’ () =>
setTimeout(()=>document.querySelector(‘body’).classList.remove(‘clicked’), 500))
.clicked{ cursor: url(’…/img/point.svg’), }

Good Luck

#3

I used CSS to style it instead. But It still has the issue :frowning: .
I am thinking now that it’s my image that is the problem. Here is the CSS bit;
#window {
cursor: url(’…/img/point.svg’),crosshair;
}

#4

you can add an event listener to the window but you cant style the #window,;
#- is an id selector;
. -is a class selector;
body -is all elements tagged <body (only one).
try adding it to the body selector
body{

}

#5

Oh! Okay, thanks!

#6

if it works create a class like,
.clicked{ cursor:----
}
then change the body class on click.

#7

No luck still.

#8

Try moving the file into the same folder as your index.html and reference the file example.svg

#9

Also open the file in a browser and make sure you have an image displayed.