Как изменить курсор мыши на сайте

Если Вас не устраивает вид курсора мыши, который используется на сайте по умолчанию, то Вы можете изменить его при помощи стилей CSS (Cascading Style Sheets). Для этого необходимо воспользоваться специальным css-свойством cursor.

Рассмотрим эту возможность на примере.

Итак, допустим у нас есть такой простой HTML-код  страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

 

</style>

  <title></title>

</head>

<body>

   <h1><u>О нас</u></h1>

   <p>Наша компания существует уже более 10-ти лет и производит самые лучшие аккумуляторы!</p>

</body>

</html>

Нам нужно изменить вид курсора мыши для всей веб-страницы.

Для этого css-свойству cursor мы присвоим значение «point» и применим это правило к селектору body:

body{ cursor:pointer; }

Вот так будет выглядеть полный HTML-код страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

body{ cursor:pointer; }

</style>

  <title></title>

</head>

<body>

   <h1><u>О нас</u></h1>

   <p>Наша компания существует уже более 10-ти лет и производит самые лучшие аккумуляторы!</p>

</body>

</html>

Вам также полезно знать о других возможных значениях свойства cursor.

Вот они:

default                

  crosshair                            

  help                     

  pointer                

  progress                             

  text      

  wait                     

  n-resize

  ne-resize              

  e-resize                

  se-resize

  s-resize

  sw-resize

  w-resize

  nw-resize            

Как задать внешний вид курсора из файла

Может возникнуть потребность применить нестандартный вид курсора из какого-нибудь файла  с расширением *.cur. Для этого свойству свойству cursor нужно задать url-адрес этого файла.

Например:

<style type=»text/css»>

body{ cursor:url(‘my_webcursor.cur’); }

</style>

В данном примере в качестве url указано имя файла курсора. Это значит, что курсор находится в той же директории, где и сама веб-страница.

Если у Вас есть файл курсора мыши, который Вы хотите использовать для сайта можете попробовать применить его прямо сейчас. Главное не ошибитесь, когда будете указывать путь (url-адрес) к внешнему файлу курсора.

Успехов!

Запись опубликована в рубрике CSS.
Теги: , , , , . Добавьте в закладки постоянную ссылку.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>