Свои собственные курсоры для сайта вебмастера

Свои собственные курсоры

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

По этой ссылке Вы можете посмотреть, как выглядят в работе разные формы своих нестандартных курсоров: http://enigma.nanoquant.ru/demo-script/cursor/demo-cursor2.html.

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

Имейте в виду, что картинки для курсоров должны быть достаточно мелкими. Посетитель сайта должен понимать, какая часть этой картинки является рабочей, то есть какой частью картинки нужно ему тыкать в нужное место.

Кроме того, имейте чувство стиля и чувство меры. Будет очень плохо смотреться, если на Вашем сайте будут десятки видов курсоров (если это, конечно, не детский сайт или не развлекательный сайт). Например, плохо, когда на каждой странице будет свой курсор или несколько сильно отличающихся друг от друга курсоров.

Достаточно, например, чтобы на сайте был курсор всегда одной оригинальной формы, но который, например, меняет свой цвет, в зависимости от того, над каким объектом он находится. Поэтому демонстрация по ссылке выше никак не является хорошим примером для подражания. Это всего лишь только демонстрация возможностей сделать на одной странице разные оригинальные курсоры, и не более.

Между тегами head вебстраницы нужно поместить стили курсоров у тех объектов, у которых должен быть свой курсор, как это показано ниже.

Этот код означает, что в стиле тега body задан курсор в виде картинки из файла mousecursor.png. Значит, на всей вебстранице будет работать курсор, картинка которого находится в этом файле.

Далее, в стиле тега ul задан курсор в виде картинки из файла cursor.ico. Значит, над всеми ненумерованными списками на этой вебстранице будет работать курсор, картинка которого находится в файле cursor.ico.

Картинки mousecursor.png и cursor.ico, которые применяются на странице демонстрации можно скачать здесь: cursor.zip.

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

Обратите внимание, что расширение рисунка "ico" является более универсальным для межбраузерной совместимости. Расширение "png" будет работать во всех версиях браузеров Google Chrome и Mozilla FireFox, но может не работать в некоторых версиях Internet Explorer. Вместо Вашей картинки из файла с расширением "png" там появитс стандартный курсор мышки.

И, наконец, для ссылок, обычно, по умолчанию задается специальный вид курсора, который не меняется на Вашу картинку из стиля тега body. (Часто это рисунок кисти руки с указательным пальцем, который готов нажать на ссылку.) Вы, конечно, для оригинальности можете переопределить вид этого курсора в теге a. Но лучше этого не делать. Иначе посетители Вашего сайта могут не понять, что это ссылка, по которой надо кликнуть мышкой.

Внимание! Если эти коды копируются из Вашего браузера в Вашу веб-страницу неправильно, то нужно их сначала скопировать в какой-нибудь самый простой текстовый редактор, например, в Блокнот. А уже потом оттуда их скопировать на свою веб-страницу.