23

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!

General Grievance
  • 4,555
  • 31
  • 31
  • 45
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145

3 Answers3

46

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?

Maverick
  • 3,039
  • 6
  • 26
  • 35
2

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;

brenjt
  • 15,997
  • 13
  • 77
  • 118
  • JSFiddle automatically wraps the code in the JavaScript panel with that if a certain setting is set (which it is). – icktoofay Jul 31 '11 at 04:09
  • But if the `#crosshairs` div is always under the cursor, how would the clicks ever go through the div and click what I want to click on the canvas? – AlienWebguy Jul 31 '11 at 04:42
  • Also, the click event works, its just that the crosshairs are missing the point. I can trigger the click event with the crosshairs if I aim the red dot about 15px down and to the right of the red dot in the `#wrapper`. Set the `cursor:default;` and you'll see you can click it just fine. – AlienWebguy Jul 31 '11 at 04:43
  • @AlienWebguy if you add `pointer-events: none;` to the `#crosshairs` it will ignore the click event on it. – brenjt Aug 01 '11 at 02:30
  • @AlienWebguy I'm sure a CSS solution would be a lot nice. But if you want to use brenjt's you can get around the click event firing on the crosshairs with something like this: http://jsfiddle.net/tXFdT/ – Paul Aug 01 '11 at 03:01
  • +1 for the effort and great idea - ended up using that simple CSS tweak from matt. Cheers! – AlienWebguy Aug 01 '11 at 03:54
2

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.

Phillip Burch
  • 459
  • 5
  • 11
  • I actually found this cursor online. Re-making the cursor is fine with me but I recall most of those cursor-making apps are shady shareware crap haha. Any recommendations? – AlienWebguy Aug 01 '11 at 02:41
  • @AlienWebguy I found this to be the best option. Plugin for photoshop (works with cs6 on mac) that lets you save cur files. http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html – Kostia May 30 '13 at 19:40