Содержание
- Основные курсоры мыши
- Пользовательские курсоры мыши
- Изменение стиля курсора с помощью встроенного JavaScript
- Игра с функциями
Изменение курсора мыши - это простой способ добавить специальные эффекты на вашу веб-страницу. Это может улучшить удобство использования, предоставляя пользователям дополнительные наглядные пособия, особенно на более сложных страницах, таких как игры и интерактивные карты. Вы можете использовать Javascript, чтобы изменить стиль курсора в зависимости от даты, погоды и всего остального. Техника использования Javascript, HTML и CSS для создания динамических веб-страниц известна как DHTML (Dynamic HTML).
Основные курсоры мыши
Существует несколько стандартных курсоров мыши, которые можно использовать путем изменения стиля элемента или тела страницы. Имена по умолчанию, перекрестие, рука, перемещение, текст, ожидание и помощь. См. Ссылку «CSS Cursor Property» в разделе «Ресурсы» для получения более подробной информации о них. Используйте CSS для определения курсора, который будет отображаться при прохождении над элементом следующим образом:
Перекрестный волос
Пользовательские курсоры мыши
В дополнение к основным курсорам вы можете использовать пользовательские шаблоны, задав адрес файла изображения в качестве стиля курсора, как в следующем примере:
Пользовательский курсор
Не все браузеры поддерживают эту функцию или все типы файлов. Например, Internet Explorer ожидает файлы с расширением .cur или .ani. Firefox не принимает анимированные курсоры (".ani") и ожидает базовый курсор за пределами изображения. Для достижения наилучших результатов укажите файл курсора («.cur» или «.ani»), файл изображения (PNG, JPEG или GIF) и базовый тип курсора в качестве резервной копии. В следующем примере используется анимированный курсор в качестве первого выбора, простой файл во втором месте и базовый курсор в качестве последнего параметра. Браузер будет пробовать все варианты, пока не найдете тот, который можно использовать:
Пользовательский курсор
Открытая библиотека курсоров в разделе «Ресурсы» предлагает коллекции бесплатных курсоров мыши.
Изменение стиля курсора с помощью встроенного JavaScript
Вы можете изменить стиль CSS курсора, используя Javascript. Существует несколько атрибутов HTML, связанных с действиями мыши, которые можно использовать для выполнения кода, щелкая, перемещая или наводя курсор на элемент страницы. Вот некоторые примеры:
onmouseover: указатель мыши проходит над элементом. onmousedown: кнопка мыши нажата. onmouseup: кнопка мыши отпущена. onmouseout: указатель мыши выходит из элемента. ondblclick: пользователь дважды щелкает мышью.
В разделе «Атрибуты» раздела «Атрибуты» вы найдете больше атрибутов, которые можно использовать для добавления действий с Javascript.
Добавьте действие к событию (например, «наведение мыши»), установив код, который вы хотите запустить, в качестве значения атрибута. В приведенном ниже примере курсор изменится на «помощь» при наведении курсора на ссылку.
помощь
Игра с функциями
Иногда вам захочется сделать больше, чем позволяет один атрибут. Записав все действия в функцию Javascript, вы можете поместить весь код в начало вашего HTML-документа и применить его к любому элементу, сделав вызов в атрибуте события. Следующий код изменяет курсор на элементе, передаваемом в качестве параметра "el":
function setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), перекрестие" GO}
Функция будет расположена в разделе скрипта заголовка документа (между тегами
и ) или во внешнем кодовом файле, указанном в той же части. Чтобы использовать его, вызовите функцию с ключевым словом «this» из атрибута события в HTML-теге. Функция получит ссылку на элемент, связанный с событием мыши, и изменит стиль курсора. Например, если указатель пропускает следующий текст, курсор изменяется:Курсор изменится по этой ссылке
Вы также можете изменить основной курсор, который будет отображаться при наведении курсора на нижнюю часть страницы. Следующая функция позволит вам изменить курсор на тип, указанный в параметре «curtype»:
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; прервать случай GO "запрещено": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), по умолчанию"; прервать GO case "default": default: document.body.style.cursor = "url (arrow.cur), default" GO}}
Чтобы использовать его, назовите его «загрузка», «запрещено» или «по умолчанию» из атрибута события в теге HTML. Например, следующая кнопка изменит курсор на «загрузку» при нажатии:
Язык Javascript имеет неограниченную функциональность. Приведенный ниже код начнет обратный отсчет и каждую секунду изменит курсор мыши на изображение, связанное с текущим значением. Функция "setTimeOut" оставит функцию приостановленной на одну секунду, прежде чем вызывать ее и обновлять счетчик.
function doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), по умолчанию" GO}}
На веб-странице используйте функцию, чтобы отобразить счетчик курсора мыши при нажатии кнопки на форме.