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

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

Деякі елементи веб-сторінок при наведенні курсора миші змінюють його вигляд - це за замовчуванням наказано їм налаштуваннями мови 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" "/> Цей код працюватиме так само, як і зразок, наведений у другому кроці.