Javascript-火狐 : how to set custom cursor from local png file?

标签 javascript firefox cursor

如何从本地镜像文件为当前页面设置自定义光标?基本上我需要使用 javascript 以编程方式更改为不同的光标,但光标本地存储在我的硬盘上。

最佳答案

您不能(但请参阅下文),因为无法从其他协议(protocol)访问或引用 file://

The basic way to include a cursor through JavaScript is:

element.style.cursor = "url(...location-of-pic...), auto";
//                                                ^^^^^^ (required as fallback)
  1. 您可以 convert your image to a base64-dataURI ,并使用它代替 file://..../cursor.png:

    document.documentElement.style.cursor = 'url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAABMLAAATCwAAAAAAAAAAAAAAAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAbGxt/2xsbf8AAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAbGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/AAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAGxsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAVHibFE94oDxKeKRkRHiqkUx4ohlsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAABLeKMPPHixUj54sIQ+eLC5Pniw3j54sP8/eK//QXet/0J2q/9Ed6k+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPXiwKkF4rf9BeK3/QXit/0J3q+xFdqnAQ3erhTt7s1Qqg8VSFY3cWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD94rwlCeKxzRHaqUUR2qis7e7MIAAAAABiM2QwJk+hyA5fv4gKX7v8AmfIbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACZPoGQOX7oIDlu7tBZXs/wSX6+wJkeqCHXjmTiBy6QIAAAAAAAAAAAAAAAAAAAAAAAAAAA+R4QICl+4kA5fuhgWW7PMGlev/BpXr6wSY64MNjOkQJ23lTC9j5PwuZOSBAAAAAAAAAAAAAAAAAAAAAAAAAAAElu0JBpXr1QaV6/8GlevpBpbrfASY6xcAAAAAK2fkNi5k5PgsZuT4LGbkRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaV62wGlet+BZbrFQAAAAAAAAAALWTkIi1l5OUsZuT/LGbkWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkDyxl5MssZuT/LGbkewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkAixm5K0sZuT/LGbkoQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmTkAixm5JMsZuT/LGbkwCxm5AcAAAAAAAAAAAAAAAAAAAAAgAEAAIAB8L+f+QAAkAkAAJAJAACfAQAA4AcAAOAHAADggwAA/gEAAPABAADwIQAA+MP///+H////DwAA/g8AAA%3D%3D"), auto';
    

    您可以在 this page 上传任何文件并将其转换为 base-64 格式. trim 空白,并添加前缀 data:image/png;base64,

  2. 除了使用数据 URI,还可以将图像上传到文件主机,并按如下方式嵌入:

    document.documentElement.style.cursor = 'url("http://sstatic.net/stackoverflow/img/favicon.ico"), auto';
    

另见:

关于Javascript-火狐 : how to set custom cursor from local png file?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9408780/

相关文章:

android - 游标返回不正确的值

jquery - hover 多次触发slideToggle 如何防止slideToggle 重复?

javascript - 使用 jquery 对话框中的 html 表单更新 mysql 中的数据

html - Firefox HTML5 无效表单消息气泡位置

javascript - 设备/服务器开发中的版本控制

google-chrome - 是否有我可以在本地设置或使用的浏览器选项卡标识符?

html - 我的网站与特定浏览器兼容吗?

Mysql游标未运行嵌套循环

javascript - 更改字体取决于选择选项标签

javascript - 尝试在react jsx中给常量一个this.state