Свои курсоры на сайте
Каскадные таблицы стилей (CSS) позволяют изменять вид практически любого элемента веб-страницы, так же это относится и к курсорам. Можно изменять не только состояние курсора (переместить, подождите и т.д.), но и использовать свои собственные курсоры. Они будут динамически подгружаться браузером и отображаться при наведении на определенные вами элементы страницы. В соответствии с тематикой вашего сайта, и вашими предпочтениями, можно изменить стандартный курсор пользователя на любой который вам подойдет.
Значения CSS-атрибута cursor
CSS-атрибут cursor может принимать значения, приведенные в таблице. Вы можете посмотреть на работу данного атрибута в вашем браузере, поместив курсор в соответствующей ячейке таблицы напротив значения, которое вы хотите просмотреть.
Вид | CSS-код | Пример | Браузер |
---|---|---|---|
![]() | cursor: default; | ![]() | все |
![]() | cursor: hand; | ![]() | IE |
![]() | cursor: pointer; | ![]() | все |
![]() | cursor: crosshair; | ![]() | все |
![]() | cursor: text; | ![]() | все |
![]() | cursor: wait; | ![]() | все |
![]() | cursor: help; | ![]() | все |
![]() | cursor: move; | ![]() | все |
![]() | cursor: e-resize; | ![]() | все |
![]() | cursor: w-resize; | ![]() | все |
![]() | cursor: ne-resize; | ![]() | все |
![]() | cursor: sw-resize; | ![]() | все |
![]() | cursor: nw-resize; | ![]() | все |
![]() | cursor: se-resize; | ![]() | все |
![]() | cursor: n-resize; | ![]() | все |
![]() | cursor: s-resize; | ![]() | все |
![]() | cursor: progress; | ![]() | все |
![]() | cursor: all-scroll; | ![]() | все |
![]() | cursor: col-resize; | ![]() | все |
![]() | cursor: no-drop; | ![]() | все |
![]() | cursor: not-allowed; | ![]() | все |
![]() | cursor: row-resize; | ![]() | все |
![]() | cursor: vertical-text; | ![]() | все |
![]() | ![]() | IE, Firefox, Google Chrome |
Примеры CSS кода
Приведенный ниже код указывает браузеру, что он должен отобразить курсор со знаком вопроса при наведении на ссылку:
<a href="/help.php" style="cursor: help;">Помощь</a>
Следующий пример указывает браузеру, что он должен использовать при наведении на ссылку вместо стандартного курсора файл cursor.cur, расположенный на вашем сайте.
<a href="/link.php" style="cursor: url(/style/cursor.cur), pointer;">Ссылка</a>
<a href="/help.php" style="cursor: help;">Помощь</a>
<a href="/link.php" style="cursor: url(/style/cursor.cur), pointer;">Ссылка</a>
0 коментарі:
Отправить комментарий