How can I set the hotspot to the center of a custom cursor?

Question

I'm using a custom cursor (png image) on a web page using cursor CSS attributes. I'd like to know if I can center the cursor position (like the cross-hair cursor in Windows) and not using the default top-left position.

One solution will be to hide the cursor and create a div with the custom cursor which will follow the cursor position but maybe someone has a better solution.

Answer 1

If your cursor is in .cur format (only .cur and .ani are supported in IE), then whichever program you use to create the .cur can set the hotspot in the header.

If you're using any other image type, CSS 3 allows the x and y values of the hotspot to be set:

#myEl { cursor: url(mycursor.png) <x> <y>; } 

Supported in:

• Firefox 1.5+
• Safari 3+
• Chrome 1+

References

• http://www.w3.org/TR/css3-ui/#cursor
• https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property

Answer 2

Also you can form your own .cur file using this amazing link http://www.cursor.cc/ Not only this the hotspot can also be decided and placed here itself.