
Здравствуйте. Сегодня я расскажу Вам о такой довольно бесполезной, но для многих все - таки приятной фишке, как нестандартный курсор (отмечающий местоположение мышки, а также прогресс прохождения каких - либо событий значок, всем известная “стрелочка”).
Сначала нам потребуется создать сам курсор (обычная картинка здесь не подойдет, правда, существуют еще так называемые SVG (формат векторной графики, разработанный W3C) курсоры, но в этой статье они рассматриваться не будут), сделать это можно, например, при помощи программы ArtCursor, именно ее я использовал в нашем эксперименте и, в общем, остался доволен ею: под мои скромные запросы она подошла как нельзя лучше. Кстати, если Вы не чувствуете в себе таланта художника или не хотите заморачиваться и тратить свое драгоценное время, можете просто скачать откуда - нибудь понравившийся курсор. Но от слов к делу:
- Скачиваем программу с официального сайта или с зеркала: ArtCurs.exe или ArtCurs.zip.
- Устанавливаем ее на компьютер, приведенная здесь версия - триал на 30 дней. Надеюсь, этого хватит для прохождения этого урока :)!
- Рисуем какой - нибудь курсор, это может быть что угодно, не обязательно стрелка, единственное, что стоит учитывать, это то, что “действующая” (рисующая, кликающая и т.д) часть курсора находится в левом верхнем углу. Регулируйте расстояние в зависимости от того, что именно Вам хотите от вашего мышеиндикатора. Вот что получилось у меня:

Далее сохраняем получившийся курсор в с расширением .cur (или .ani, как анимированный курсор - Рассматриваемая нами программа позволяет создавать и такие).
Если лень рисовать, есть возможность скачать то, что намалевал я.
Все, ArtCursors нам больше не нужен, можно его закрыть, чтобы оперативку не съедал
Затем определим селектор для нашего курсора, то есть место страницы, в котором он будет функционировать и напишем для него код css стилей (как его подключить к конкретной странице или шаблону cms, я надеюсь, знают все). Я подключаю свой “мыш” ко всей странице, то есть к body. CSS, кстати, имеет стандартные курсоры, которые задаются ключевыми словами:
- auto - курсор по умолчанию для текущего элемента.
- crosshair - перекрестие (”+”).
- default - курсор, используемый по умолчанию на платформе (всем известная “стрелка”).
- pointer - указатель, обозначающий ссылку (”рука”).
- move - курсор, определяющий объект, который можно переместить.
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize - курсоры, обозначающие возможность перемещения некоторого края объекта.
- text - указатель, обозначающий текст, который может быть выделен (”|”).
- wait - курсор, обозначающий занятость программы, и говорящий пользователю, что следует подождать (циферблат или песочные часы).
- help - курсор, означающий, что для объекта, на который он указывает, имеется справочная информация (знак вопроса или “воздушный шар”)
Если браузер не может загрузить (не находит или не поддерживает указанный курсор), то автоматически ищет следующий, указанный в списке, а посему в css на первое место поставим только что нарисованный курсор, а на второе - какой - нибудь стандартный, хотя их, в принципе, может быть сколь угодно много.
body { cursor:url('cursor.cur'), crosshair; }
И на последок: на этой странице (засорять весь сайт - не лучший подход), стандартный курсор блога должен замениться только что созданным мною.
P.S. В этой статье я просто показал принцип подключения курсора к html странице путем использования CSS, расписывать здесь все случаи, в которых можно применить разные “стрелки” не имеет смысла, присоединение к конкретному элемену страницы (селектору), имеющему конкретные свойства - задача, с которой справится каждый. Если возникли трудности, учите CSS. И писать в коментариях “Скажите, как подключить вот этот курсорчик к вот этой кнопочке?” по десять раз - это, по - меньшей мере, себя не уважать.