Виды курсора в CSS. Ипользование картинки для курсора

Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Вид курсора устанавливает свойство cursor. В следующей таблице перечислены значения этого свойства и соответствующие им виды курсора:

Как Вы можете видеть, для некоторых видов указателя мыши существуют по два значения. Использовать можно любое. В некоторых браузерах эти курсоры выглядят по-другому, и тогда значения могут отличаться.

Кроме того, есть такие значения:

cursor: auto — указатель мыши будет такой, какой и должен быть

cursor: inherit — значение принимается от родительского элемента

Кроме названных значений существуют и другие, но они поддерживаются не всеми браузерами.

Создадим блок и установим для него вид указателя мыши — pointer. Это делают, чтобы показать пользователю, что на этот элемент можно нажать.

+

1
2
3

4
5
6
7

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>

8

<div>Блок</div>

Запустите страницу, наведите указатель мыши на блок и курсор получит вид, который для него установлен.

В качестве указателя мыши можно использовать картинку. Для этого в свойстве cursor нужно указать путь к файлу изображения. Каждый браузер поддерживает свой набор форматов для курсора. Самый распространённый формат — cur. Он работает в большинстве браузеров. Можно указать несколько файлов через запятую. Если первый файл не поддерживается, то будет использован второй. Если и он не может применяться, то берётся третий, и так далее. Также желательно указать стандартный вид курсора. Он используется, если ни один из файлов не подойдёт.

Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.

Скачать

Добавим ещё один блок и используем эту картинку для курсора.

9

<div>Блок</div>

Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.

basecourse.ru

Использование URL значений для свойства cursor — Веб-технологии для разработчиков

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства cursor в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.

Синтаксис

Базовый (CSS 2.1) синтаксис для этого свойства:

cursor:  [<url>,]* ключевое_слово

Это означает, что устанавливать можно любое количество URL’ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как 

auto или pointer.

Например, такая последовательность значений допустима:

cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;

В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto.

Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):

cursor:  [<uri> [<x> <y>]?,]* ключевое_слово

Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.

Пример CSS 3 синтаксиса:

.foo  {
  cursor:  auto;
  cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
  cursor:  pointer;
  cursor:  url(cursor2.png) 2 2, pointer;
} 

/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */

Первое число определяет координату по оси x, а вторая — по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).

Ограничения

Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.

Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

В Gecko (Firefox) максимальный размер курсора — 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.

(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32×32 пикселя. Это исправляется в более новых версиях.)

Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.

URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).

Совместимость с другими браузерами

Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства 

cursor. Тем не менее:

  • IE поддерживает только CUR и ANI форматы.
  • IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.
БраузерРанняя версияФорматыx-y-координаты
Internet Explorer6.0.cur | .ani
Firefox (Gecko), Windows и Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)
4.0
(2.0)
.cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
Начиная с OS X 10.5, Safari (Mac) поддерживает  .cur файлы

developer.mozilla.org

Как изменить форму курсора мыши на сайте с помощью CSS

Как изменить форму курсора мыши на сайте с помощью CSS

В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor».
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.

Вот так выглядит шаблон для изменения вида курсора в CSS:


p
{
cursor: значение;
}

Все значения находятся в табличке снизу:

Как изменить форму курсора мыши на сайте с помощью CSS

Итак, вначале нужно создать в CSS класс со свойством «cursor»:


.pointer
{
cursor: pointer;
}

В HTML вывести класс:


<a href="#">наведи курсор</a>

Давайте я сейчас сделаю один примерчик.
Вот готовый рабочий код:


<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощью CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style ENGINE="text/css">
body {cursor: pointer;}
.help { cursor: help; }
.crosshair {cursor:crosshair;}
.wait {cursor:wait;}
.ne-resize{cursor:ne-resize;}
</style>
</head>
<body>
<ul>
<li><a href="#">наведи курсор </a></li>
<li><a href="#">наведи курсор</a></li>
</ul>
<p>наведи курсор, и курсор изменится</p>
<h4>наведи курсор, и курсор изменится</h4>
</body>
</html>

[посмотреть на результат]

Собственный курсор-картинка на css

Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку. Скачайте курсор мышки с интернета в формате «CUR», их там куча.
Вот так выглядит шаблон для изменения вида курсора-картинки в CSS:


P
{
cursor : url('путь к курсору'), стандартный курсор;
}

стандартный курсор – сюда вставляется значение из таблицы курсоров (смотрите таблицу выше).
Вот готовый код:


<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощи CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { cursor: url("Up_Arrow.cur"), text;}
a:hover { cursor : url("UpArrow.cur"), auto;}
</style>
</head>
<body>
<ul>
<li><a href="#">наведи курсор </a></li>
<li><a href="#">наведи курсор</a></li>
</ul>
</body>
</html>

[посмотреть на результат]

[скачать курсоры с примера — UpArrow.cur]
[скачать курсоры с примера — Up_Arrow.cur]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, для сайта

bloggood.ru

Как задать свой курсор на сайте через CSS

Вы здесь: Главная — CSS — CSS Основы — Как задать свой курсор на сайте через CSS

Как задать свой курсор на сайте через CSS

Время от времени мне задают вопрос: «Как задать свой курсор на сайте?«. Разумеется, делается это через CSS, и в этой статье я покажу, как это сделать, а также расскажу о требованиях к изображению курсора, плюс разберём некоторые особенности различных браузеров.

Изображение курсора можно делать во многих форматах, например, в png или jpg. Но работать это будет не везде. В частности, Internet Explorer не поддерживает курсоры в таких форматах, ему нужен специальный формат — cur. К счастью, все остальные браузеры также поддерживают cur.

С форматом определились. Теперь нужно понять, как сделать изображение в таком формате. Есть много различных программ, можно воспользоваться, например, IcoFX. Кто не хочет создавать сам, может найти их в Интернете. Различных курсоров огромное количество и, наверняка, найдётся какой-нибудь подходящий.

Когда у Вас есть курсор, всё, что Вам осталось сделать, чтобы задать его на сайте, это загрузить его на сайт и добавить в CSS такой код:

body {
  cursor: url("cursor.cur"), auto;
}

Безусловно, вместо body может быть любой другой селектор.

Резюме:

  1. Создать курсор в формате cur через IcoFX, либо найти в Интернете.
  2. Поместить его куда-нибудь на сайт (например, в папку с изображениями).
  3. Прописать код по установке курсора в CSS.

Вот таким нехитрым образом задаётся свой курсор на сайте через CSS.

  • Как задать свой курсор на сайте через CSS Создано 11.01.2013 08:07:18
  • Как задать свой курсор на сайте через CSS Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *