Як поміняти курсор на сайті

Як поміняти курсор на сайті

Сайти, що мають привабливий зовнішній вигляд, користуються великою популярністю у відвідувачів. Щоб покращити вигляд ресурсу, їх власники зазвичай повністю або частково змінюють дизайн. Але додавання нових барвистих елементів для оформлення сторінок, на жаль, займає багато часу. Швидким способом заволодіти увагою відвідувачів ресурсу є заміна звичного курсору на невелике зображення. Для установки такого елемента на сайті потрібно виконати кілька нескладних дій.

Вам знадобиться

- Власний сайт
- Мати хоча б початкові знання HTML
- Знати, де знаходиться код CSS на сайті

Інструкція

  1. Спочатку скачайте картинку, яка буде заміняти покажчик на сайті. Зображення поширених графічних форматів (. Bmp,. Gif,. Jpeg,. Png та ін) для цієї мети не підійдуть.
  2. Для заміни покажчика потрібна картинка у форматі. Cur або. Ani. Щоб отримати таке зображення, знайдіть в інтернеті спеціально призначені для курсорів картинки. Розширення. Cur характерно для статичних зображення, а. Ani — для анімованих. Збережіть на комп’ютер вподобаний файл.
  3. Але, щоб поміняти покажчик, зовсім не обов’язково брати готове зображення. Якщо ви хочете зробити картинку самостійно, то скористайтеся однією зі спеціальних програм для створення курсорів або конвертації форматів графічних файлів.
  4. Залийте зображення для курсора на сайт. Потім в коді ресурсу знайдіть тег <body> і внесіть до нього наступні зміни:

    <body style=»cursor:url(images/1.ani);»> <body>

    Замість запису «images/1.ani» позначте шлях до залитої на ваш сайт картинці.
  5. Якщо ви хочете, щоб курсор при наведенні на посилання був у вигляді однієї картинки, а при знаходженні в області відсутності посилається елемента — мав вигляд іншого зображення, то краще для зміни покажчика використовувати CSS. Щоб зробити такі перетворення, спочатку залийте на сайт ще один файл з розширенням. Cur або. Ani.
  6. Потім в CSS вашого сайту зробіть запис «body {cursor: url (’1. Ani’);}», вказавши замість» 1.ani «шлях до залитого на сайт основному зображенню для курсора. Цей код додає властивість змінювати курсор на зазначену картинку до тегу <body>, в якому прописується вміст всіх сторінок ресурсу.
  7. Потім напишіть в CSS рядок «a {cursor: url (’2. Ani’);}», замінивши» 2.ani «на шлях до залитого на ресурс зображенню курсора, яке повинно виникати при наведенні покажчика на сервері. Зроблена запис дозволяє замінити курсор на відповідну картинку при попаданні покажчика на будь-яке посилання на сайті, тому що вносить зміни до властивість тега <a>.