CODEWITHSUNDEEP
javascriptcssmouse-cursor
Soft
Soft

Reputation: 1804

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 Canvas object. How to load my own icon?

Upvotes: 4

Views: 2452

Answers (4)

Lachlan Roche
Lachlan Roche

Reputation: 25946

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

Upvotes: 6

tibalt
tibalt

Reputation: 16164

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

Upvotes: 0

Anthony Forloney
Anthony Forloney

Reputation: 91786

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.

Upvotes: 3

Sam Dark
Sam Dark

Reputation: 5291

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.

Upvotes: 1

Related Questions