Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 18. Как изменить внешний вид курсора?

Автор: Андрей Краснокутский

Дата: 2009-08-01

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

Делается это очень просто, в нужных местах просто прописываем стиль курсора используя парный тег <span> </span>. Используя span класс , например придаем абзацу определенный стиль. А стили курсоров бывают такие:

Таблица 1.

Внешний вид курсора
Код
<span style=CURSOR:crosshair;>Графическое выделение</span>
<span style=CURSOR:move;>Перемещение</span>
<span style=CURSOR:e-resize;>Стрелка вправо</span>
<span style=CURSOR:ne-resize;>Обычный режим (зеркальный)</span>
<span style=CURSOR:nw-resize;>Обычный режим</span>
<span style=CURSOR:n-resize;>Стрелка вверх</span>
<span style=CURSOR:sw-resize;>Обычный режим (перевернутый)</span>
<span style=CURSOR:se-resize;>Обычный режим (перевернутый, зеркальный)</span>
<span style=CURSOR:s-resize;>Стрелка вниз</span>
<span style=CURSOR:w-resize;>Стрелка влево</span>
<span style=CURSOR:text;>Выделение текста</span>
<span style=CURSOR:wait;>Система недоступна</span>
<span style=CURSOR:help;>Выбор справки</span>

Как Вы уже поняли, в левой колонке представлен внешний вид курсора, а в правой колонке, код который необходимо прописать. При наведении стандартного курсора на текст которому придан span класс - курсор меняет свой внешний вид.

Как это работает? Ниже представлены названия курсоров, при наведении на текст мыши, курсор меняет свой внешний вид. Попробуйте....

Графическое выделение.....

Перемещение .....

Стрелка вправо .....

Обычный режим (зеркальный).....

Обычный режим .....

Стрелка вверх .....

Обычный режим (перевернутый) .....

Обычный режим (перевернутый, зеркальный) .....

Стрелка вниз .....

Стрелка влево .....

Выделение текста .....

Система недоступна .....

Выбор справки .....

Попробовали? Значит поняли пинцип действия. Пример: надо сделать такое сообщение (или что-то подобное):

 

"Извините, в настоящее время сайт находится на модерации. Регламентные работы закончатся в 22.00. Спасибо за понимание."

 

Ниже приводится листинг кода:

Листинг 18.1.

<p><span style=CURSOR:wait;>"Извините, в настоящее время сайт находится на модерации. Регламентные работы закончатся в 22.00. Спасибо за понимание."</span></p>

 

При наведении курсора на текст объявления, курсор меняет свой внешний вид. Цвет и размер шрифта выбираете на своё усмотрение.

 

Просмотров: 12474


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Михаил
Дата: 2011-10-25

А как сделать чтобы курсор менял свой вид при наведении на ссылку? И что делать если в опере работают только стандартные курсоры, а при попытке прописать нестандартный курсор не отображает его(cursor:url(...)), в ИЕ работает.

Комментарии добавил(а): Данил
Дата: 2012-01-07

Спасибо! Сделал себе анимированный курсор в стиле аниме "самураи" , супер! Кстати, чтобы вставить курсор на сайт, так , чтобы он был основным - <body style bgcolor=#c0c0ff(это просто цвет страницы) <span style=CURSOR:(имя курсора без скобок)">

Комментарии добавил(а): Данил
Дата: 2012-01-07

Все это указывать в коде "<body style>" , чтобы сделать курсор основным для сайта

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Дистанционное сопровождение организаций по Охране труда.
Проведение Специальной оценки условий труда (СОУТ).

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT