Changing mouse icon thru javascript

Question

I am developing paintbrush application in javasript using Canvas Object. I want to change my own mouse cursor when the mouse pointer comes inside Canvas object. How to load my own icon?

Answer 1

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.

Answer 2

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.

Answer 3

This can be accomplished in CSS.

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

IE will use the .cur file. Firefox, Safari and Chrome will use the gif/jpg/png. 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