Изменение значка мыши через JavaScript

Question

Я разрабатываю приложение кисти в javasript, используя Canvas Object. Я хочу изменить свой собственный курсор мыши, когда указатель мыши находится внутри объекта Canvas. Как загрузить свою иконку?

Answer 1

Это может быть выполнено в 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

Answer 2

У вас есть .cur файл для вашего собственного пользовательского курсора?

Внутри объекта Canvas может быть атрибут style, который сообщает, как должен отображаться курсор. Это можно сделать с помощью пользовательского курсора CSS

style="cursor: url(mycursor.cur);"

1. IE ожидает файл .cur.
2. Firefox требует второго значения, не являющегося URL; как курсор: url (pix / cursor_ppk.gif), авто.
3. Размер изображения должен быть 32x32 пикселей или ниже. Это ограничение (Windows) для ОС; не ограничение браузера.

Взято из CSS2 - стили курсора , оно совместимо с IE5.5 +, FF, Safari и Chrome. Opera и Konqueror 3.5.7 не совместимы.

Answer 3

Есть способ: http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ Доза не работает с Opera, но подходит для IE, FF, Safari, Chrome.

Answer 4

Я разместил обходной путь для оперы, используя js здесь: Опера и пользовательский курсор в CSS