通过javascript更改鼠标图标

时间:2010-02-14 14:50:14

标签: javascript css mouse-cursor

我正在使用Canvas Object在javascript中开发画笔应用程序。 当鼠标指针进入Canvas对象时,我想更改自己的鼠标光标。 如何加载我自己的图标?

4 个答案:

答案 0 :(得分:6)

这可以在CSS中完成。

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

IE,Firefox,Safari和Chrome将使用.cur文件。 GIF(或使用PNG)适用于不支持.cur文件的浏览器(不确定是否有这样的)。 Opera不支持自定义游标。

图像的大小必须为32x32像素或更低。这是(Windows)操作系统限制;不是浏览器限制。

参考 - Quirksmode CSS兼容性表http://www.quirksmode.org/css/cursor.html

答案 1 :(得分:2)

您有自己的自定义光标的.cur文件吗?

您可以在Canvas对象中包含一个style属性,该属性指示如何显示光标。这可以通过custom css cursor

来完成
style="cursor: url(mycursor.cur);"
  
      
  1. IE需要一个.cur文件。
  2.   
  3. Firefox需要第二个非URL值;像cursor:url(pix / cursor_ppk.gif),auto。
  4.   
  5. 图像的大小必须为32x32像素或更低。这是(Windows)操作系统限制;不是浏览器限制。
  6.   

取自CSS2 - Cursor styles,在IE5.5 +,FF,Safari和Chrome中兼容。 Opera和Konqueror 3.5.7不兼容。

答案 2 :(得分:1)

有一种方法:http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/剂量不适用于Opera,但适用于IE,FF,Safari,Chrome。

答案 3 :(得分:0)

我在这里使用js发布了opera的解决方法: Opera and Custom cursor in CSS