javascript - 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 is still the top left of the icon, whereas it needs to be dead center of the icon for the cursor to make any sense.

Here's the cursor:

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

Here's a demo: http://jsfiddle.net/9kNyF/

If you put the red dot from the cursor over the red dot I created in the demo, it won't fire the click event. You have to attempt to aim the top left corner at it.

If you set the cursor back to cursor:default; you'll see the click event fires just fine, it's just a matter of "aiming" the cursor.

The game is coded in JQuery so if I need to add some logic there for cursor offset or something lame, so be it. Ideally I want this to be a CSS fix.

Thanks!

Answer 1

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?