В операционной же системе вашего компьютера при навигации по различным
элементам интерфейса вы неоднократно замечали, что вид курсора меняется. Этого
можно добиться и при навигации по веб-странице. Более того, вы сами можете
выбрать тип курсора при наведении его на различные элементы веб-страницы.
Добиться этого поможет функция переопределения вида курсора при помощи стилей.
Так как я наиболее часто использую при работе с веб страницей программу 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ы и ответы/а>
Вот и всё на этом. Нет, самое важное забыл вам сказать - прежде чем
переопределять форму курсора для каких-то элементов, подумайте хорошо,
насколько это важно и как это впишется в смысловое значение веб-страницы. Иначе
некоторые из ваших безграничных фантазий могут просто ввести пользователей в
заблуждение, и если есть хоть какие-то сомнения, то лучше оставьте все значения
по умолчанию.
|