Как изменить указатель мыши на изображение, которое было нажато в Javascript

Question

Я занимаюсь симулятором роста растений, чтобы научить детей выращивать растения. Есть потоки об изменении указателя, такие как эти: JavaScript, как изменить курсор мыши на изображение? Как изменить указатель мыши на изображение при нажатии на него в c #

Тем не менее, проблемы разные. То, что я хочу сделать, это изменить указатель мыши на изображение, на которое щелкнули, чтобы он выглядел примерно так:

1. нажмите на лопату на боковой панели, и указатель мыши изменится на лопату
2. тогда дети щелкают в том месте, где они хотели бы вырыть яму для своего растения, и там, где они щелкнули, появится изображение кургана
3. они возвращаются на боковую панель и нажимают на семена, и указатель мыши изменится с лопаты на мешок с семенами

Я не знаю, должен ли я пытаться изменить указатель на событие щелчка или сделать указатель невидимым и добавить к нему копию выбранного изображения, поэтому я был бы признателен за помощь.

Answer 1

Чтобы изменить курсор мыши по требованию, вам нужно добавить прослушиватель щелчков для рассматриваемого элемента. Например:

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>

Answer 2

в JS, просто сделайте:

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

например:

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

Чтобы заменить курсор по умолчанию, измените стиль курсора на пустой:

document.body.style.cursor = ""