2014-02-10
418
Свойство cursor определяет тип курсора, используемого при работе с клавиатурой или мышью. По умолчанию (значение auto) Web-браузер определяет отображаемый курсор, исходя из контекста.
Для типа курсора можно определить следующие значения:
· default – курсор, используемый на данной платформе по умолчанию (
);
· crosshair – курсор в виде перекрестья (
);
· help – курсор наличия справочной информации (
);
· text – курсор, используемый при выделении текста (
);
· pointer – курсор-указатель (
);
· wait – курсор, указывающий на занятость программы (
).
· move – курсор, указывающий на перемещение объекта (
).
Кроме того, имеется ряд типов курсора, отражающих перемещение границы:
· n-resize или s-resize – курсоры, отображающие перемещение верхней или нижней границы (
);
· e-resize и w-resize – курсоры, отображающие перемещение правой или левой границы (
);
· ne-resize и sw-resize – курсоры, отображающие перемещение верхней и правой границы или нижней и левой границы (
);
· se-resize или nw-resize – курсоры, отображающие перемещение правой и нижней границы или левой и верхней границы (
).
|
|
|
Можно задать наследование свойства от родительского элемента (значение inherit).
Можно также определить собственный курсор (файл с расширением.cur), задав адрес ресурса, описывающего курсор в значении url(" URL ") свойства cursor, причем в URL можно указать несколько значений для курсора, разделенных запятыми. Если файл описания для первого курсора не найден, ищется файл описания для второго курсора и т.д., причем обычно в конце списка ставится одно из предопределенных значений курсора (например, pointer). Если же не один курсор не найден, используется курсор по умолчанию (стрелка).
Последняя возможность не реализована в Web-браузере Opera. В Internet Explorer можно также использовать анимированный курсор (файл с расширением.ani).
Пример 4.5.62. Использование свойства cursor:
1. В следующем примере для кнопки Старт задан курсор-указатель:
function startAction()
{
alert("Нажата кнопка Пуск");
}
…
<button id="startButton"
style="color: green; font-weight: bold; cursor: pointer"
onclick="startAction()">Пуск</button>
Вид фрагмента Web-страницы в случае, когда курсор мыши не находится над кнопкой и когда он находится над кнопкой:
| 
|
2. Изменим свойство cursor из примера 4.5.62(1) следующим образом
cursor: url('images/penl.cur'), pointer
Тогда при прохождении курсора мыши над кнопкой в Web-браузерах Internet Explorer, Firefox и Safari курсор примет следующий вид:
|
В Web-браузере Opera курсор примет форму по умолчанию (в виде стрелки).
3. Изменим свойство cursor из примера 4.5.62(1) следующим образом
cursor: url('images/ pointer.ani'), pointer
Тогда при прохождении курсора мыши над кнопкой в Web-браузере Internet Explorer будет выведен анимированный курсор:
|
|
|
|
В Web-браузерах Firefox и Safari курсор примет форму курсора-указателя, а в Opera курсор примет форму по умолчанию (в виде стрелки).
