Як визначити мишу x / y в клавіатурі / keydown - javascript, jquery, html, css

Я хочу змінити зображення курсору на анімацію gif коли користувач натискає клавішу.

Я спробував змінити властивість css "курсора", але він не рухається ...

Тому я хочу зробити div з фоновим зображенням і помістіть його в позицію X / Y курсора.

Те, що я намагався зробити зараз, це:

var xPlace;
var yPlace;

$(document).mousemove(function(eventParent) {
xPlace = eventParent.pageX;
yPlace = eventParent.pageY;
});

$(document).keydown(function(event) {
if (event.keyCode == 109) {
$("body").addClass("accessibility_cursordetect");
var cursorDetect = "<div class="accessibility_cursordetect_img"></div>";
$(cursorDetect).appendTo("body");
$(".accessibility_cursordetect_img").css({
"top": yPlace,
"right": xPlace
});
}
});

Проблема - у моїй функції keydown -xPlace & yPlace повернення "undefined"

Як я можу визначити позицію x / y мого курсору, коли користувач натискає на певну клавішу ("m", наприклад = keyCode = 109)?

Дякую.

Відповіді:

Ви маєте можливість використовувати властивість "курсор"таким чином, щоб змінити зображення курсору (використовуючи фотографію профілю в цьому прикладі), натиснувши кнопку, враховуючи, що у вас вже є jQuery, додати клас тіла

.accessibility_cursordetect{
cursor: url(https://www.gravatar.com/avatar/9b2dfec811b4643164cba1fd1f244404?s=32&d=identicon&r=PG), auto;
}