Изменение курсоров с помощью HTML-кодов: пользовательский курсор мыши

Изменение курсоров с помощью HTML-кодов: пользовательский курсор мыши

Узнайте, как настроить указатель мыши на вашем сайте

Есть множество причин добавить изюминку вашему сайту: презентация, графическое представление идеи или просто ради удовольствия. Изменение курсора (традиционно отображаемого в виде белой стрелки, управляемой мышью) — лишь одно из многих изменений, которые можно внести, но оно интересное. Оно даёт вебмастеру множество уникальных возможностей. Как только вы поймёте, как изменить его с помощью HTML-кода, вы сможете экспериментировать дальше, чтобы найти нужный вам вид. Ниже приведены шаги по изменению курсора мыши на вашем сайте.

1. Поймите, как работает изменение курсора. В большинстве случаев, когда вы вносите какое-либо изменение на сайт (для красоты или иное), разумно понимать, что именно делает это изменение. Изменение курсоров мыши на вашей веб-странице включает изменение тега — фундаментального HTML-тега, который является частью основы любой страницы и который вместе со своим закрывающим тегом содержит большую часть написанного и закодированного содержимого вашей веб-страницы. Сам значок будет изображением в формате .cur, которое будет размещено в вашем веб-пространстве или на внешнем источнике (если вы используете значок, размещённый не в вашем веб-пространстве, будет вежливо указать авторство в небольшой заметке где-нибудь на вашем сайте). Пользовательский курсор не потребует много дополнительного времени загрузки и будет действовать только пока ваш сайт открыт.
2. Поймите ограничения изменения курсора. Правда об изменении курсора на вашем сайте состоит в том, что единственный браузер, который действительно поддерживает это изменение, — Internet Explorer, и по большей части только версии 5.5 и выше. Изменение курсоров в большинстве других браузеров просто невозможно. Можно предположить, что часть причины этого в том, что операционная система Windows позволяет очень свободно менять курсор рабочего стола. Microsoft, скорее всего, заметила спрос на такую настройку и также реализовала её в своём веб-программном обеспечении.
3. Решите, чего вы хотите от курсора. В большинстве случаев вебмастер, устанавливающий новый курсор, не стремится к функциональности. Часто это украшения для красоты, хотя иногда они улучшают визуальную схему сайта полезным и профессиональным образом. Например, на сайтах с функцией поиска обычно указатель мыши или курсор меняется на песочные часы (или часы и т. п.), пока сайт выполняет поиск, а затем возвращается к обычному виду, когда поиск завершён. Однако курсор не всегда используется для полезного визуального представления.

   Часто вебмастер просто хочет изменить свой курсор, чтобы он лучше сочетался с его сайтом или отдавал дань уважения определённому персонажу или концепции. Курсоры, которые тогда используются, иногда могут быть громоздкими, и многие веб-сёрферы сочтут их некрасивыми и неудобными. Однако некоторые выглядят иначе, чем традиционная стрелка, не ухудшая удобство использования. Перекрестия и вариации традиционной стрелки могут достичь цели — выглядеть иначе — и при этом не бросаются в глаза.

   Эффектные курсоры (например, блочной формы, изображения животных и т. п.), даже с чётко обозначенной стрелкой внутри, всё ещё могут немного раздражать пользователя. Однако другим они могут показаться забавными или занятными. Нельзя угодить всем; решение в конечном итоге за вами.

4. Найдите сайт, который предоставляет то, что вам нужно. В большинстве случаев проще всего найти сайт, который предлагает пользовательские курсоры и код, который нужно вставить в HTML вашей веб-страницы, чтобы они работали. Чтобы использовать сайт для установки нового курсора, просто найдите такой, как перечисленные в разделе «Рекомендуемые ссылки», и следуйте их простым инструкциям. Они позволят вам выбрать курсор, а затем предоставят фрагмент кода, который вы сможете вставить на свой сайт, как они вам укажут.
5. . . . или сделайте это сами! Вы также можете создавать собственные курсоры. Для этого вам понадобятся две вещи: программа вроде GConvert, которая позволит создавать файлы .cur, и место для загрузки вашего файла .cur. Вы можете создать графический файл и с помощью GConvert (и инструкций, найденных на GdgSoft) превратить файл изображения для смены курсора в новый курсор. Программа и руководство помогут вам импортировать изображение, определить горячую точку на изображении (участок вашего курсора, который реагирует, когда вы щёлкаете по чему-либо), и сохранить изображение как файл .cur. После того как вы создали курсор (сохранённый в формате .cur) и загрузили его в своё веб-пространство, вы можете указать расположение вашего файла с помощью атрибута style тега на вашей веб-странице следующим образом:

   style='cursor:url(thelocationofyourfile.cur);'

   Так, чтобы тег body выглядел так:

   Замените 'thelocationofyourfile.cur' на расположение вашего файла курсора в виде URL. Убедитесь, что вы используете допустимый файл курсора (.cur).

Выше приведена вся информация, необходимая для того, чтобы оживить вашу веб-страницу новым и уникальным курсором. Вы можете пойти удобным путём, выбрав один из тысяч уже предлагаемых в интернете курсоров (вместе с исходным кодом), или можете немного дополнительно изучить вопрос и сделать собственный, ещё более уникальный, используя подходящее программное обеспечение и свои изображения. Веселитесь и будьте креативны!