[ACCEPTED]-Custom CSS cursor click point-cursor
CSS3 supports setting the midpoint of a cursor image, where the hotspot of the pointer (i.e. the 11 point at which clicks are registered) is:
cursor: url(mycur.cur) 6 6, auto;
Where 10 the two 6 values mean 6 pixels from the left 9 and 6 pixels from the top respectively. The 8 default hotspot is always the top left corner 7 of your image, i.e. 0 0.
Browser support for 6 this feature may be rather poor though as 5 it's a CSS3 feature, so it's not something 4 you should rely on just yet. (That said, Firefox 3 has supported it from version 1.5!) If a 2 browser can't interpret the coordinates, the cursor property will be ignored, so 1 be careful.
This is a rather delicate issue if you want 19 cross browser compatibility for your custom 18 cursor (when the hotspot is not in the upper 17 left corner). First of all, you are constrained 16 by IE to use .cur format. The .cur format 15 also encapsulates the hotspot position. You 14 can edit .cur format (there are free tools 13 out there like Real World Cursor Editor) to 12 set the hotspot pixel. Unfortunately, chrome 11 ignores the encapsulated hotspot of the 10 .cur format for some reason, and it sets 9 it by default to 0, 0. So you must provide 8 those coordinates, but this will make IE 7 ignore the entire css property...
My approach 6 when working with custom cursors with hotspots 5 other than 0,0 is this:
First set the hotspot 4 pixel at the desired coordinates (9,7 in 3 this example) using a .cur editor. Then 2 use something like below. This will cover 1 IE, FF and Chrome
cursor:url(mycursor.cur), default;
cursor:url(mycursor.cur) 9 7, default; /*chrome cursor hotspot fix - ignored by IE
The basic syntax is as follows:
cursor: url(image) [x y|auto];
However there 10 are a number of quirks to be aware of that 9 make it quite tricky to work with cross-browser.
The 8 main one is that Internet Explorer requires 7 the cursor to be in '.cur' format, while 6 other browsers require it in standard image 5 format (eg '.gif'). If you want to support 4 all browsers, you will need to create both, and 3 write browser-specific code.
It apparently 2 doesn't work at all in Opera.
The Quirksmode site has full 1 details of all the oddities to expect.
CSS 3 hot spot positioning but this is not 1 supported by IE https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
cursor: url(cursor.gif) 2 2, pointer; property: url x-coordinate y-coordinate, fallback image;
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.