How to change the mouse pointer to the image that was clicked on in Javascript

Question

I'm doing a plant growth simulator to teach kids about growing plants. There are threads about changing the pointer such as these ones: JavaScript how to change mouse cursor to an image? How to change the mouse pointer to an Image when clicked on it in c#

However, the concerns are different. What I want to do is have the mouse pointer itself change to the image that was clicked on so it will give something like this:

1. click on the shovel in the sidebar and the mouse pointer changes to a shovel
2. then the kids click in the place where they would like to dig a hole for their plant and the image of dirt mound will appear where they clicked
3. they go back to the sidebar and click on the seeds and the mouse pointer will change from a shovel to a bag of seeds

I don't know if I should be trying to change the pointer on a click event or make the pointer invisible and append a copy of the selected image to it so I would appreciate some help on that.

Answer 1

in JS, just do:

document.body.style.cursor = "url([url]), pointer"

for example:

document.body.style.cursor = "url(http://bringerp.free.fr/Files/RotMG/cursor.gif), pointer"

To replace to default cursor, change cursor style to empty:

document.body.style.cursor = ""

Answer 2

To change the mouse cursor on demand, you'll have to add a click listener to the element in question. For example:

const src = 'https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1';
const docStyle = document.body.style;
document.querySelector('img').addEventListener('click', () => {
  if (!docStyle.cursor) docStyle.cursor = `url('${src}'), default`;
  else docStyle.cursor = null;
});

div {
  height: 300px;
  background-color: green;
}

<div>
  <img src="https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1">
</div>