Custom cursor interaction point - CSS / JQuery

Question

I\'m trying to use a custom cursor for an online game, in this case it\'s a sniper scope.

The problem is when I reference the cursor via CSS, the interaction point

Answer 1

As far as it not firing the click event try placing this around your event listener.

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

With the centering of the cross hairs it might be easier to use a div with the background of the image and using jQuery to place the div over your cursor in the correct place.

<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>

You then hide the cursor doing something like so: cursor: url(http://www.seancannon.com/_test/transparent.png), default;

Answer 2

You just need to provide the hotspot's <x> and <y> position in your CSS:

In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)

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

http://jsfiddle.net/9kNyF/15/ see?

Answer 3

whatever tool you used to create the cursor, should have an option for managing the click target area. You'd be chasing you tail looking for a javascript/css solution.