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!

@Jason to be fair I didn't test in IE haha, but good to know! thanks :) — SeanCannon
– SeanCannon, Commented Aug 1, 2011 at 3:08

Maverick · Accepted Answer · 2011-08-01 03:06:48Z

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?

answered Aug 1, 2011 at 3:06

Maverick

3,0596 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SeanCannon Over a year ago

@TrymBeast if you read Jason Gennaro's comment under the question, he implied IE9 centers the icon by default

brenjt · Accepted Answer · 2011-08-01 02:31:01Z

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;

edited Aug 1, 2011 at 2:31

answered Jul 31, 2011 at 4:06

brenjt

16.3k14 gold badges80 silver badges120 bronze badges

6 Comments

icktoofay Over a year ago

JSFiddle automatically wraps the code in the JavaScript panel with that if a certain setting is set (which it is).

SeanCannon Over a year ago

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?

SeanCannon Over a year ago

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.

brenjt Over a year ago

@AlienWebguy if you add pointer-events: none; to the #crosshairs it will ignore the click event on it.

Paul Over a year ago

@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: jsfiddle.net/tXFdT

|

Phillip Burch · Accepted Answer · 2011-08-01 02:38:49Z

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.

answered Aug 1, 2011 at 2:38

Phillip Burch

4595 silver badges11 bronze badges

2 Comments

SeanCannon Over a year ago

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?

Kostia Over a year ago

@AlienWebguy I found this to be the best option. Plugin for photoshop (works with cs6 on mac) that lets you save cur files. telegraphics.com.au/svn/icoformat/trunk/dist/README.html

Collectives™ on Stack Overflow

Custom cursor interaction point - CSS / JQuery

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related