Пользовательская точка взаимодействия курсора - CSS/JQuery

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

Проблема заключается в том, что когда я ссылаюсь на курсор через CSS, точка взаимодействия по-прежнему остается в левом верхнем углу значка, тогда как для обозначения курсора нужно иметь в виду мертвую точку.

Здесь курсор:

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;

Вот демо: http://jsfiddle.net/9kNyF/

Если вы поместите красную точку из курсора над красной точкой, которую я создал в демо, она не будет запускать событие click. Вы должны попытаться прицелиться в верхний левый угол.

Если вы вернете курсор на cursor:default;, вы увидите, что событие щелчка просто прекрасное, это просто вопрос "прицеливания" курсора.

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

Спасибо!

Ответы

Ответ 1

Вам просто нужно указать точку hotspot <x> и <y> в CSS:

В вашем примере центр оказывается 24px в верхнем/левом (огромный жук-курсор lol)

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;

http://jsfiddle.net/9kNyF/15/ см.?

Ответ 2

Пока он не запускает событие щелчка, попробуйте разместить его вокруг слушателя событий.

$(function(){
    $('#point').click(function(){
        alert('clicked point');
    });
});

С центрированием перекрестия может быть проще использовать div с фоном изображения и с помощью jQuery поместить div над курсором в нужное место.

<div id="crosshairs"></div>
<script>
$(function(){
    $("body").mousemove(function(e){
        var CrossHairWidth = $('#crosshairs').width();
        var CrossHairHeight = $('#crosshairs').height();
        $('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
        $('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
    });
});
</script>

Затем скрыть курсор, сделав что-то вроде этого: cursor: url(http://www.seancannon.com/_test/transparent.png), default;

Ответ 3

любой инструмент, который вы использовали для создания курсора, должен иметь опцию для управления целевой областью щелчка. Вы будете гоняться за хвостом, ища решение javascript/css.