Пример

Профиль

Гость
Логин:
Пароль:

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!

ICQ - Бот

- 569243131
Наш ICQ - Бот it-x7.do.am
Множество интересных возможностей
Справка - ??
Список команд - !help, help, ?
Проф. команды - prof

Облако софта

Хочешь себе такой блок?

Наш опрос

Ваша скорость интернет соединения?
Всего ответов: 38

Поиск

Статистика

Зарег. на сайте

Всего: 7056
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0


Статистика материалов

Новостей: 259
Статей: 54
Файлов: 15
Фото: 70
Форум: 35/184
Коментариев: 1152



Онлайн всего: 1
Гостей: 1
Пользователей: 0

Друзья сайта

Главная » Статьи » Мастерская » Прочее


Использование CSS для изменения вида курсора мыши

В операционной же системе вашего компьютера при навигации по различным элементам интерфейса вы не­однократно замечали, что вид курсора меняется. Этого можно добиться и при навигации по веб-странице. Более того, вы сами можете выбрать тип курсора при наведении его на различные элементы веб-страницы. Добиться этого поможет функция переопределения вида курсора при помощи стилей.

Так как я наиболее часто использую при работе с веб ­страницей программу Macromedia Dreamweaver, то на её примере я и покажу вам как это можно сделать.

Во-первых, выбранному элементу веб-страницы при­свойте какой-нибудь класс (class), значения которого и будем определять в стилевой таблице.

Второе. В Dreamweaver раскройте в правой части рабо­чего стола панель (док) CSS Styles (если она была свёрну­та), найдите заранее созданный class и щёлкните по нему правой клавишей мыши. В раскрывшемся контекстном меню выберите пункт «Edit...», чтобы открыть диалоговое окно «CSS Rule definition". Также данное окно можете вы­звать аналогичной командой из дополнительного меню, находящегося в правом верхнем углу панели.

В этом окне теперь перейдите на вкладку «Extensions» (screen 1). Мы не станем сейчас разбирать все предо­ставляющиеся здесь возможности, так как нас сейчас интересует в нём всего один единственный пункт - это «Cursor» с его раскрывающимся списком значений. Вам теперь остаётся только выбрать нужное значение для этого параметра стиля и щёлкнуть по кнопке «Apply», чтобы стиль курсора был тут же применён к выбранному элементу.

Однако для начала не помешало бы ознакомиться со значениями данного параметра, чтобы знать, какое из них выбирать более подходящим по смыслу к используемому месту, а их здесь целых четырнадцать: (screen 2)

- crosshair - перекрестье в виде прицела;

- text - обычный текстовый курсор;

- wait - песочные часы, знакомые все по Windows в минуты ожидания;

- default - «по умолчанию», т.е. обычная стрелка;

- help - стрелка и рядом с нею вопросительный знак;

- e-resize - стрелка вправо;

- ne-resize - стрелка вверх вправо;

- n-resize - стрелка вверх;

- nw-resize - стрелка вверх влево;

- w-resize - стрелка влево;

- sw-resize - стрелка вниз влево;

- s-resize - стрелка вниз;

- se-resize - стрелка вниз вправо;

- auto - в данном случае управление формой курсора передаётся на усмотрение браузера, аналог значению «по умолчанию».

Есть ещё одно значение, которое в этом списке от­сутствует, но его можно установить из таблицы на панели CSS Styles - это значение «inherit». Суть его заключается в том, что в данном случае следует «наследовать» значение параметра «вышестоящего» уровня.

Также в этом списке не оказалось ещё двух интересных значений:

- hand - то есть «указующий палец», стандартный вид курсора мыши при наведении на гиперссылку;

- move - перекрестье из четырёх стрелок.

Для примера приведу небольшой синтаксис html-кода, чтобы вы, руководствуясь приведённым выше списком значений, могли использовать данные стили на своей стра­нице и без использования Macromedia Dreamweaver.

В «шапке» (между тегами <head> </head>) или в отде­льном файле CSS пишите:

<style type="text/'css" >

.maine{cursor: help}

</style>

(здесь и далее maine - это придуманное мною имя class, у вас же будут свои названия класса).

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

<а href-nelp.htm" class="maine">Bonpocы и ответы/а>

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

Категория: Прочее | Добавил: Godrik (17.10.2009)
Просмотров: 1322 | Теги: css, курсор, значение, вид, Стрелок, стиль, элемент, список, class, выбрать | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
it-x7.do.am © 2010; Все права защищены;
Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Администрация ответственности за содержание материала не несет и убытки не возмещает.
Сайт управляется системой uCoz