Як змінити курсор при наведенні

Як змінити курсор при наведенні

Деякі елементи веб-сторінок при наведенні курсору миші змінюють його зовнішній вигляд — це за замовчуванням наказано їм налаштуваннями мови HTML (HyperText Markup Language — «Мова розмітки гіпертексту»). У цій мові є засоби, що дозволяють змінити такі ж налаштування і для інших елементів сторінок. При необхідності для цих цілей можна використовувати і мова CSS (Cascading Style Sheets — «Каскадні таблиці стилів») і клієнтський мова сценаріїв JavaScript.

Інструкція

  1. Використовуйте атрибут style, щоб мати можливість задати потрібне значення змінної cursor в теге цікавить вас об’єкта веб-сторінки. Наприклад, HTML-код текстового поля введення, який наказує браузеру відвідувача змінювати зовнішній вигляд курсору таким же чином, як і при наведенні його на посилання, можна написати так:

    <input type=»text» style=»cursor: pointer» />
  2. Виберіть потрібний вам варіант зовнішнього вигляду курсору зі списку допустимих для параметра cursor значень. У наведеному в попередньому кроці зразку використано значення pointer — точно такий же ефект дає і значення hand. Крім цих двох значень передбачені наступні варіанти зовнішнього вигляду курсору: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, sw-resize, text, w -resize, wait. Наприклад, щоб у наведеному вище прикладі коду курсор прийняв форму не руки, а двобічної стрілки з лівого верхнього кута в правий нижній, замість значення pointer треба використовувати nw-resize:

    <input type=»text» style=»cursor: nw-resize» />

    Літери перед значенням resize допомагають визначити в який бік направляє стрілку це значення — вони, як на компасі, відповідають позначенням сторін світу. Наприклад, nw — позначає nord-west (північний захід), s — south (південь) і т.д.
  3. Вказуйте замість зумовлених значень URL файлу, якщо ви завантажили на сайт своє власне зображення для курсора в його «рідному» форматі cur. Для цього треба використовувати такий синтаксис:

    <input type=»text» style=»cursor: url(http://someSite.ru/someCursor.cur)» />

    Якщо файл знаходиться в одній папці з сторінкою або у вкладеній в неї папці, то замість абсолютного адреси можна вказувати відносний.
  4. Використовуйте атрибут onmouseover, якщо хочете змінювати зовнішній вигляд курсору за допомогою мови JavaScript. Наприклад:

    <input type=»text» onmouseover =»this.style.cursor=’nw-resize’» />

    Цей код буде працювати точно так само, як і зразок, наведений у другому кроці.