Как изменить указатель мыши на изображение, по которому было выполнено нажатие в Javascript
Я делаю симулятор роста растений, чтобы научить детей выращивать растения. Есть темы об изменении указателя, например эти: JavaScript как изменить курсор мыши на изображение?Как изменить указатель мыши на изображение при щелчке по нему в с #
Однако опасения разные. Что я хочу сделать, так это изменить указатель мыши на изображение, по которому был выполнен щелчок, чтобы он выдал что-то вроде этого:
- щелкните лопату на боковой панели, и указатель мыши изменится на лопату
- затем дети щелкают в том месте, где они хотели бы вырыть яму для своего растения, и там, где они щелкнули, появится изображение земляной насыпи.
- они возвращаются на боковую панель и щелкают по семенам, и указатель мыши изменится с лопаты на мешок с семенами
Я не знаю, следует ли мне пытаться изменить указатель на событие щелчка или сделать указатель невидимым и добавить к нему копию выбранного изображения, поэтому я был бы признателен за некоторую помощь в этом.
@CertainPerformance Я уже искал этот вопрос раньше, и, по моему мнению, это было не совсем то же самое. Я отредактировал исходный вопрос, чтобы указать на это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 = ""
Я попробовал ваше предложение, и оно сработало (jsfiddle.net/r9Lbmhxv), но это не совсем так. Я имею в виду, что я начинаю с указателя мыши по умолчанию, затем, когда я нажимаю на верхнее поле, указатель меняется на поле, и я больше не вижу стрелку. Надеюсь, это более понятно. В качестве примера вставляю ссылку на аналогичную садовую игру: girlgames4u.com/vegetable-garden-game.html (требуется Flash, извините)
Лучше всего установить курсор как изображение лопаты. Несмотря на все мои усилия, при перетаскивании окна html я не мог убрать этот чертов "запрещенный" курсор. (i.imgur.com/VXo6K1D.png). Просто используйте события mousedown и mouseup, чтобы управлять им.
Чтобы изменить курсор мыши по требованию, вам нужно добавить прослушиватель щелчков к рассматриваемому элементу. Например:
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>Да. Ткс. Я применил его к исходному примеру, и он работал нормально (jsfiddle.net/r9Lbmhxv/2), чтобы убедиться, что я понял. Затем я попытался сделать то же самое с локальным изображением, но это не сработало. const src = 'images/Shovel.png'; const docStyle = document.body.style; document.querySelector('img').addEventListener('click', () => { if (!docStyle.cursor) docStyle.cursor = url ('$ {src}'), по умолчанию: ; else docStyle.cursor = null; });
doesn't work расплывчатый и его невозможно отладить - код в фрагменте и в скрипке хорош, как вы можете видеть.
Чтобы быть более точным, я вызываю локальное изображение, поэтому мне было интересно, неправильно ли я ссылаюсь на него в моем коде, поэтому почему код не работает или это не имеет никакого значения? const src = 'images/Shovel.png'
Это правильный синтаксис. images должен быть дочерним каталогом базового каталога. Вы можете посмотреть на вкладку «Сеть» своего браузера, чтобы увидеть, куда идет запрос, и сравнить его со структурой вашей файловой системы. Вы также можете увидеть, что происходит с <img src = "images/Shovel.png"> в вашем HTML.
Я вижу изображение в своем HTML-коде, но когда я смотрю на вкладку «Сеть», при нажатии ничего не происходит. Я обновил код (jsfiddle.net/r9Lbmhxv/3) и заменил исходный img изображением, которое использую. Я вижу изображение, но когда я нажимаю на него, указатель остается прежним. Я не думаю, что это связано с форматом, но я все еще не могу понять причину.
Возможно, вам придется применить стиль к определенному контейнеру, а не ко всему body. Например, заключите всю страницу в div, выберите этот div и назначьте его свойству style.cursor. По крайней мере, работает с моей стороны.
Попался, и у меня не было возможности следить. Хотел поблагодарить вас за вашу помощь и ваше время.
Пожалуйста, покажите нам код, который вы пробовали. Пожалуйста, прочтите, как задать вопрос