Как поменять курсор на сайте?

Сайты, имеющие привлекательный внешний вид, пользуются большой популярностью у посетителей. Чтобы улучшить облик ресурса, их владельцы обычно полностью или частично меняют дизайн. Но добавление новых красочных элементов для оформления страниц, к сожалению, занимает много времени. Быстрым способом завладеть вниманием посетителей ресурса является замена привычного курсора на небольшое изображение. Для установки такого элемента на сайте нужно выполнить несколько несложных действий.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - собственный сайт
• - иметь хотя бы начальные знания HTML
• - знать, где находится код CSS на сайте

Инструкция

Сначала скачайте картинку, которая будет заменять указатель на сайте. Изображения распространенных графических форматов (.bmp, .gif, .jpeg, .png и др.) для этой цели не подойдут.

Для замены указателя нужна картинка в формате .cur или .ani. Чтобы получить такое изображение, найдите в интернете специально предназначенные для курсоров картинки. Расширение .cur характерно для статических изображение, а .ani - для анимированных. Сохраните на компьютер понравившийся файл.

Но, чтобы поменять указатель, совсем не обязательно брать готовое изображение. Если вы хотите сделать картинку самостоятельно, то воспользуйтесь одной из специальных программ для создания курсоров или конвертации форматов графических файлов.

Залейте изображение для курсора на сайт. Затем в коде ресурса найдите тег и внесите в него следующие изменения:

Вместо записи "images/1.ani" обозначьте путь к залитой на ваш сайт картинке.

Если вы хотите, чтобы курсор при наведении на ссылку был в виде одной картинки, а при нахождении в области отсутствия ссылающегося элемента - имел вид другого изображения, то лучше для изменения указателя использовать CSS. Чтобы сделать такие преобразования, сначала залейте на сайт еще один файл с расширением .cur или .ani.

Затем в CSS вашего сайта сделайте запись "body {cursor:url('1.ani');}", указав вместо "1.ani" путь к залитому на сайт основному изображению для курсора. Этот код добавляет свойство менять курсор на указанную картинку к тегу , в котором прописывается содержимое всех страниц ресурса.

Потом напишите в CSS строчку "a {cursor:url('2.ani');}", заменив "2.ani" на путь к залитому на ресурс изображению курсора, которое должно возникать при наведении указателя на ссылку. Сделанная запись позволяет заменить курсор на соответствующую картинку при попадании указателя на любую ссылку на сайте, так как вносит изменения в свойство тега .

Оцените статью!