All geek questions in one place

Change mouse icon through javascript

I am developing a paintbrush application in javasript using a Canvas Object. I want to change my own mouse cursor when the mouse cursor enters the Canvas object. How to upload my own icon?

+4
source share
4 answers

This can be done in CSS.

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

IE, Firefox, Safari and Chrome will use the .cur file. GIF (or using PNG) is intended for browsers that do not support the .cur file (not sure if there are any such files). Opera does not support custom cursors.

Image size should be 32x32 pixels or lower. This is (Windows OS) OS limitation; not a browser limitation.

Link - Quirksmode CSS Compatibility Tables http://www.quirksmode.org/css/cursor.html

+6
source

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

You can have a style attribute inside your Canvas object that indicates how the cursor should be displayed. This can be done using a custom css cursor

 style="cursor: url(mycursor.cur);"
  • IE is expecting a .cur file.
  • Firefox requires a second, non-URL value; as cursor: url (pix / cursor_ppk.gif), auto.
  • Image size should be 32x32 pixels or lower. This is (Windows OS) OS limitation; not a browser limitation.

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

+2
source

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

+1
source

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

0
source

Source: https://habr.com/ru/post/1301252/

More articles:


All Articles