Changing mouse icon thru javascript

I am developing paintbrush application in javasript using Canvas Object. I want to change my own mouse cursor when the mouse pointer comes inside Ca开发者_如何学运维nvas object. How to load my own icon?

This can be accomplished in CSS.

canvas {
    cursor: url(cursor.cur), url(cursor.gif), auto;
}

IE, Firefox, Safari, and Chrome will use the .cur file. The GIF (or use a PNG) is intended for browsers that don’t support the .cur file (not sure if there are any like this). Opera does not support custom cursors.

The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

Reference - Quirksmode CSS compatibility tables http://www.quirksmode.org/css/cursor.html

Do you have a .cur file for your own custom cursor?

You can have inside your Canvas object a style attribute that tells how the cursor should be shown as. This can be done through a custom css cursor

style="cursor: url(mycursor.cur);"

1. IE expects a .cur file.
2. Firefox requires a second, non-URL value; like cursor: url(pix/cursor_ppk.gif), auto.
3. The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.

Taken from CSS2 - Cursor styles, it is compatible in IE5.5+, FF, Safari and Chrome. Opera and Konqueror 3.5.7 is not compatible.

There is a way: http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ Dose not work with Opera, but fine for IE, FF, Safari, Chrome.

I posted workaround for opera using js here: Opera and Custom cursor in CSS