Custom cursor interaction point - CSS / JQuery

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?

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;

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.