Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

CSS - курсор (cursor).



чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - " HTML на примерах, всё доступно и просто (для начинающих)"
- - -чайник, HTML ДЛЯ ЧАЙНИКОВ- - -
>> с к а ч а т ь <<

чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - "Как создать классный сайт!
От начала и до конца"
---чайник, HTML ДЛЯ ЧАЙНИКОВ--->> с к а ч а т ь <<

CSS - курсор (cursor).Для установки собственного курсора для ваших web – страниц поможет CSS, свойство cursor.

Свойство CSS cursor – служит для изменения внешнего вида курсора.


Свойством cursor можно задавать стандартные виды курсоров, это те, что находятся на компьютере пользователя, а можно загрузить и установить свой личный курсор. Обычно формат курсора CUR или SVG.

> Стандартные курсоры.
Наведите мышкой, понаблюдайте изменение курсора.

  • auto - курсор по умолчанию.

  • crosshair - перекрестие.

  • default  - курсор в виде стрелки.

  • pointer  - курсор обозначающий ссылку.

  • move  - курсор, определяющий объект для  перемещения.

  • e-resize ne-resize nw-resize n-resize se-resize sw-resizes-resize , w-resize  - курсоры, обозначающие возможность перемещения края объекта.

  • text  - курсор, обозначающий текст.

  • wait  - курсор, обозначающий загрузку программы или объекта.

  • help  - курсор, означающий справочную информацию, в виде вопросительного знака.

Пример заполнения.

скопируй код в блокнот и сохрани как "cursor.html"


<html>
<head>

<style type="text/css">

.help { cursor: help }

.crosshair {cursor:crosshair}

.wait {cursor:wait}

.ne-resize{cursor:ne-resize}

</style>


</head>
<body>

<a href="#" class="help">наведи курсор </a>
<a href="#" class="crosshair">наведи курсор</a>
<a href="#" class="wait">наведи курсор</a>
<a href="#" class="ne-resize">наведи курсор</a>

</body>
</html>

Вот, что должно получиться. При наведении курсора мышки на ссылку, курсор будет меняется.

.наведи курсор./.наведи курсор./.наведи курсор /.наведи курсор

> Собственный курсор-картинка на CSS
Для установки на сайт собственного курсора укажите в свойстве cursor путь к самому курсору-картинке.

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

Для наглядности приведу примеры:

P { cursor : url("my.cur"), text; } 
P { cursor : url("
my.svg"), url("my.cur"), auto; }

Пример заполнения.

скопируй код в блокнот и сохрани как
"cursor-img.html"


<html>
<head>

<style type="text/css">

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

a:hover
{
cursor : url("UpArrow.cur"), url("Up_Arrow. svg "), auto;
}


</style>


</head>
<body>

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

</body>
</html>

- просмотреть пример курсора


Я указал, что картинка курсора находиться в корне сайте, то есть вместе со страницей сайта. Если картинка курсора лежала бы в папке “img”, тогда путь был бы таким

cursor : url("img /UpArrow.cur"), url("img /Up_Arrow. svg”), auto;


Расшифровка: я указал, где находиться курсор-картинка и какую картинку нужно загрузить для курсора (UpArrow.cur), в случае, если картинка не загрузилась, будет загружаться вторая картинка (Up_Arrow. svg), но даже если и она по каким-то причинам не загрузилась, тогда пойдет загрузка курсора по умолчанию (auto – смотрите стандартные курсоры).

 

 

 

 

 

 

 

 

В качестве курсора можно использовать файлы в формате CUR, ANI, SVG, PNG, GIF курсоры
Поддерживаются собственные курсоры-картинки (пользовательские курсоры) начиная с браузеров IE6, Firefox 1.5.
Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI.
IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.
скачать курсоры  для мыши, бесплатно.
дальше -Прозрачный CSS фончайник, HTML ДЛЯ ЧАЙНИКОВ


Понравилась статья? - добавь ее себе!


 




сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012