Как изменить курсор мыши на сайте.
По умолчанию, курсор мыши, который используется на веб-страницах, имеет вид стрелочки, либо вытянутого указательного пальца правой руки, который отображается, когда пользователь наводит указатель мыши на ссылку.
В общем-то, на этом весь выбор и ограничивается.
Но на практике, иногда возникают ситуации, что хочется изменить стандартное отображение курсора при определенных действиях пользователя. Хочется изменить его внешний вид.
Соответственно, возникает вопрос, как это сделать и какими средствами?
Если мы говорим об изменении внешнего вида курсора, который будет использоваться на веб-страницах, то возможность это сделать предоставляет нам технология CSS. В этой заметке хотелось бы рассмотреть, как это можно сделать.
Но хотелось бы сразу предупредить, что менять внешний вид курсора мыши, который используется по умолчанию, нужно очень осторожно.
Почему? Потому что курсор, который будет менять свой внешний вид в неподходящем месте и в неподходящее время может вводить пользователя в заблуждение.
Например, если сделать так, чтобы при наведении курсора мыши на ссылку он превращается в иконку перевернутых песочных часов, пользователь может подумать, что страница еще не загрузилась и.т.д.
Поэтому пользуйтесь такой возможностью с осторожностью.
Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:
cursor: [ url ("путь к курсору"),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Из этого выражения следует, что курсор мыши может быть либо:
1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;
2) Взят из специального файла с изображением курсора
3) Наследован от родительских элементов.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Внешний вид курсора мыши из списка ключевых слов:
Чтобы вы могли представить, какой внешний вид приобретет ваш курсор мыши в зависимости от того ключевого слова, которое вы будете использовать, мне бы хотелось привести специальную таблицу значений:
Каждому значению соответствует определенное отображение курсора.
В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.
Текст абзаца
Внешний вид курсора мыши из файла:
Кроме того, внешний вид курсора можно задать, указав путь к специальному файлу, который содержит оригинальное изображение для курсора.
Файлы с изображениями для курсоров можно без проблем найти в Интернете.
Вот пример, как можно воспользоваться такой возможностью.
Текст абзаца
Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.
Наследованный внешний вид курсора:
И последнее, курсор мыши может быть наследовано от своих родителей. Например,
Текст абзаца
Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем
, курсор меняет свое оформление.
Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.
Вот такие возможности предоставляет нам технология CSS, для работы с курсорами.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как изменить стандартный курсор на сайте?
В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body { cursor: url('/пусть к файлу/sword.cur'), auto; >
В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover { cursor: url('/путь к файлу/sword.cur'), auto; >
Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover { cursor: w-resize; >
А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
Стилизованный курсор на любом сайте за минуту
В данной статье рассказано каким образом сделать стилизованный курсор на своем сайте за минуту. Статья содержит видео-подкаст, где наглядно показано что и где прописывать в файле стилей.
Сделать свой курсор можно как на всем сайте в целом, так и на отдельных его частях. Подходит для всех движков сайта, а так же самописов.
Для начала предлагаю посмотреть видео-подкаст, где наглядно показано, что мы будем делать и какой результат получится.
Смотрите видео в качестве HD (шестеренка в правом нижнем углу). Записано при помощи программы FastStone Capture.
Поддержка форматов курсоров разными браузерами:
- Internet Explorer — CUR и ANI;
- Firefox, Chrome, Safari — CUR, PNG, GIF, JPG;
- Opera — на момент написания статьи не поддерживает.
Свой курсор для всего сайта при помощи CSS
Прежде всего делаем заготовки курсоров в нужном формате и закачиваем их к себе на хостинг. Далее открываем файл стилей и вставляем следующий параметр в класс body (в видео показано наглядно):
cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;
В результате курсор изменится по всему сайту, за исключением наведения на ссылку. Чтобы изменить курсор на ссылке, нужно вставить это же самое для a в файле стилей (обычно сразу же за body располагается).
Стилизованный курсор в определенной части сайта
Если вы хотите сделать тематический курсор только в определенной части сайта (в блоке сайдбара, или в теле самой статьи, ее частей), то необходимо прописать параметр cursor только для выбранного класса:
.post a
Вот ссылка на справочник, где можно найти информацию о допустимых параметрах в синтаксисе cursor http://htmlbook.ru/css/cursor .
Обсуждение статьи лучше делать в комментариях, чтобы посетители сайта могли так же получить ответы на свои вопросы. На крайний случай пишите в форму обратной связи.
Привет. Я автор этого блога и ридера вебмастеров/SEO-специалистов WMSN.ru Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи. Не стесняйся.
Как изменить курсор мыши на сайте с помощью css
При создании уникального дизайна сайта имеет значение каждая деталь, будь то стили слайдера, шапки, кнопок или курсора. Многие дизайнеры забывают о том, что курсор легко можно поменять под стилистику дизайна.
Например, если он на свадебную тематику, в розовых тонах, то почему-бы его не сделать розовым или в виде сердечка. А если сайт серьезный, то и курсор можно сделать строгим.
Подбирая или создавая курсор для сайта, главное не переборщить — курсор должен быть легко воспринимаемым и не вызывать негодования у пользователя. Но в любом случае, другой курсор на сайте будет сразу бросаться в глаза пользователю, как плюсик в плане неповторимости сайта.
Особенность курсоров в css заключается в их многообразии и функциональности. Вы можете задать уникальный курсор подключив его из картинки в формате .cur или использовать стандартный.
Подключим уникальный курсор на всем сайте:
В этом стиле на тег body задается новый курсор, его путь: cursor/2.cur. Т.е. для задания курсора достаточно указать к чему вы его будете применять (селектор) и путь к курсору. После курсора стои default, который озгначает, что если не удастся подключить файл курсора, то будет грузиться курсор по умолчанию.
Еще пару примеров:
a < cursor: url('cursor/2.cur'), default; >— применяем курсор ко всем ссылкам на сайте
.content < cursor: url('cursor/2.cur'), default; >— применяем курсор элементу с классом content
Не обязательно подключать курсор из файла. Его можно менять и стандартными методами.
cursor: alias; ссылка
cursor: all-scroll; прокрутка во все стороны
cursor: cell; плюсик
cursor: copy; копировать
cursor: help; с вопросом
cursor: progress; крутится круглешок загрузки
cursor: wait; загрузка
Данных курсоров достаточно много, каждый для своей задачи. Но все же из файла курсор самый лучший. Вам останется только найти в Яндексе или Гугле файлы с расширением .cur и установить уникальные курсоры на своем сайте.