ГлавнаяДизайн блога › Как изменить Указатель Мыши на сайте?


Как изменить Указатель Мыши на сайте?

Указатель мышиПриветствую, всех читателей — Sozdaiblog.ru!

Сегодня я расскажу, как поменять курсор мыши на сайте.

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

Главное,  не переусердствовать в этом деле, а то бывают такие кадры, что при одном его виде хочется закрыть ресурс и больше не возвращаться.

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

Надеюсь, что Вы уловили мои мысли.

Итак.

 

Как поменять курсор мыши.

Для начала, Вам потребуется создать новое изображение будущего указателя мыши. В этом Вам поможет специальный сервис – www .cursor.cc.

Выбираете любое понравившееся изображение в Интернете и скачиваете себе на компьютер. Затем, переходите на сервис и в левой колонке меню выбираем — Import Image:

 

Курсоры мыши

 

После этого используя окно загрузчика, закачиваем сохранённое ранее изображение на сервис, размером не более 5 MB:

 

как поменять курсор мыши

 

Далее, откроется окно, в котором можно произвести нужное Вам редактирование, а под ним будет наглядный пример конечного результата. Закончив все манипуляции, нажимаем – Download Cursor:

 

Указатель мыши

 

Теперь, скаченный указатель мыши нужно закинуть в корневую папку Вашего ресурса.

Следующим шагом открываем на редактирование файл style.css, который находится в папке с Вашей активной темой оформления. В нём находим тег body или похожую конструкцию:

 

body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left;}

 

Внутри фигурных скобок вписываем следующий код:

 

cursor:url(http://Путь к новому курсору), default;

 

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

 

Мой совет:

Не используйте JPG-картинки, на чёрном фоне они смотрятся некрасиво. Применяйте расширения PNG, а лучше CUR.

 

На сегодня это всё.

Скажите, а Вы изменяете стандартные указатели мыши?

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

До новых встреч…

 

С уважением, Денис Черников!






Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




67 комментариевА что думаете Вы?

  1. Александр Красильный

    Денис ты как всегда жжешь! Я как раз хотел в ближайшее время спросить у тебя, как сменить курсор на сайте. А тут хоп, и ты прочитал мои мысли! Экстрасенс...

    Сейчас пойду по колдую со своим бложиком, уже есть пару интересных идей =)

    [Ответить]

    Денис Черников ответил:

    Привет, Александр! Смотрю ты следишь за мной!))) Я уже привык, что твой коммент первый!

    Мысли читать не умею, но знаю, что хорошие идеи приходят одновременно всем положительным людям сразу! Думаю, что ты поймёшь глубину этого высказывания!

    [Ответить]

    Александр Красильный ответил:

    Просто у нас с тобой часовые пояса немного разные. Я по своей натуре сова и спать ложусь поздно ночью.

    Получается так, когда ты публикуешь статьи у меня примерно двенадцать или час ночи. Вот и получается, что я всегда первачком отзывы бабахаю... =)

    [Ответить]

    Денис Черников ответил:

    Ааа, вон оно что! Кстати, это правильно, нужно всегда быть везде первым, тогда быстрее заметят!

    [Ответить]

  2. Александр

    Курсор оригинальный :)

    [Ответить]

    Денис Черников ответил:

    Спасибо, что оценили!))))))))))))))

    [Ответить]

  3. Александр

    Денис, «Подарок всем — Бесплатное Видео» сегодня скачал.Ты сам сейчас используешь все, что там дано?

    [Ответить]

    Денис Черников ответил:

    Да, Александр! С выходом каждой новой статьи я активно пользуюсь этим сервисом!

    [Ответить]

    Александр ответил:

    Интернет медленный, но уже загрузил. То, что я искал. Денис, если можно хоть примерный трафик с Subscribe.ru

    [Ответить]

    Денис Черников ответил:

    Александр, здесь всё расплывчиво.Всё зависит от темы, посещаемости групп, правильного заголовка и харизмы Автора! В хорошее время, при написании и анонсирования классной статьи в 20 групп, ко мне по 200 человек в день приходили! А так 50-100 стабильно!

    [Ответить]

  4. Светлана

    Здорово Денис! Все привнесу еще одну изюминку себе на сайт :) Тем более, опять в очередной раз дизайн сменила :) . Спасибо, все просто и понятно

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Светлана! Скоро праздники, как раз украсите свой ресурс!

    [Ответить]

  5. blogrub

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

    [Ответить]

    Денис Черников ответил:

    Вы у меня разрешения спрашиваете или у себя? Возьмите и поставьте, за чем дело стало!

    [Ответить]

    Александр Красильный ответил:

    Ставить что-то на свой блог или не ставить выбор стоит за вебмастером!

    Вот курсор — это выгладит оригинально, когда он подобран красиво под дизайн блога. А часы — это уже заезженная тема, которая является очень банальной и никому не интересной.

    [Ответить]

    blogrub ответил:

    Интересно просто рассказать и не показать на примере :)

    [Ответить]

  6. Лидия

    Только подумала о том, что хорошо бы сделать курсор в виде елочки, а Саша Красильный это уже сделал!

    [Ответить]

    Денис Черников ответил:

    Вот такой он шустрый парень!)))

    [Ответить]

    Александр Красильный ответил:

    Хех, я его ночью сделал, так сказать пока все спят студент работает =)

    [Ответить]

  7. Лидия

    Елочку сделала, по шагам дошла до style.css, нашла тег body, а дальше боюсь напортачить: код курсора вставлять сразу после открытой { или перед }? Как прописать путь к новому курсору? Как почистить кэш браузера? Вот такие «чайниковские» вопросы.

    Этот блог убран к Новому году снежком, только это на платформе Блогспот, скопировать код можно на странице «Посиделки»

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Александр Багров

    Два уточнения имею:

    1. В указанной CSS-конструкции body — это уже не тег, а селектор, в качестве которого употреблен дескриптор body. То есть, употребленная вами фраза ориентирует на поиск тега body в теле веб-документа. Тогда как указанную CSS-конструкцию нужно искать в головной секции веб-документа или даже в отдельном файле со CSS-списками.

    2. Полагаю, не следует указывать http:// внутри url (...), так как эта абсолютная адресация затруднит

    отладку локальной версии веб-проекта на компьютере разработчика.

    [Ответить]

    Денис Черников ответил:

    Уточнения лично для Вас:

    На моём блоге собираются новички. Те люди, которые только познают азы Веб-мастерства и подача информация в стиле «Я супермозг» не поможет понять и сделать то о чём идёт речь в статье.

    Если кто-то захочет узнать что такое селектор, то он прочитает учебник по CSS и NTML. Сдесь же описывается конкретное действие с инструкцией по применению в которой чётко описаны все шаги реализации изменения курсора мыши.

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

    Полагать можно всё что угодно, но решение остаётся за самим разработчиком.

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

    [Ответить]

    Денис ответил:

    +1 селекторы — коклекторы, главное, что правильно изложили материал, Денис, а на задирающих высоко нос можно и не обращать внимание, прочитав Ваш пост я и сам с легкостью настроил все, тут максималльно просто все описано)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. dmitoks

    спасибо, сейчас поищем что нибудь интересное)))

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, заходите!

    [Ответить]

  10. Денис

    Спасибо, Денис, поставил заместо курсора елочку=)

    [Ответить]

    Александр Красильный ответил:

    Мне даже кажется я знаю, откуда Вы спионерили эту елочку! =)

    [Ответить]

    Денис ответил:

    Да, да, Александр, спасибо Вам=)

    [Ответить]

    Александр Красильный ответил:

    Мне не жалко, пользуйтесь на здоровье! =)

    [Ответить]

  11. Валерия

    Сделала всё как у Вас написано, но новый курсор появляется только когда навожу его на панель админки, т.е. на полоску сверху. Не подскажите, в чём может быть проблема?

    [Ответить]

    Денис Черников ответил:

    Значит что-то упустили! У меня ведь работает! Пробуйте ещё!

    [Ответить]

    Валерия ответил:

    Оказывается не упустила) Решение другое: из-за особенностей темы строку, в которой путь к курсору, мне нужно было разместить не в body{}, а в другом месте CSS, точнее в трёх(!) — art-main{}, art-layout-cell{} и art-post-body{}. А в body{} оказалось совершенно бесполезным. Пришлось повозиться прежде чем разобралась, правда не знаю насколько это грамотно?!))) зато теперь всё работает. Спасибо!)

    [Ответить]

    Денис Черников ответил:

    Рад, что у Вас всё получилось! Видимо и правда проблема в особенностях строения Вашей темы оформления. Такое чувство, что её не под WordPress делали. Был у Вас в гостях. Оригинальное решение для указателя. В принципе всё соответствует тематике сайта, а это самое главное.

    [Ответить]

  12. Галина

    Мне понравилась идея изменения вида курсора, как бы мелочь, а получается небольшая особенность, притягивающая взоры, спасибо, осталось внедрить!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Галина! Действительно мелочь, а приятно!

    [Ответить]

  13. Евгений

    На замену курсора ушло около часа,долго искал style.css зато во всем разобрался.Спасибо !

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Если что обращайтесь!

    [Ответить]

  14. Vasilionis

    Здравствуйте! Сделал курсор себе на сайт как у вас описано. Разобрался быстро. Теперь красуется на сайте. Сайт сделан на платформе wordpress. Недавно задался вопросом увеличения скорости загрузки сайта. Пытаюсь все плагины заменить кодом. Вот теперь думаю заменить мой любимый курсор на стандартный. Вы мне не подскажите влияет ли такая «изюминка» сайта на скорость его загрузки? Я новичок в сайтостроении и буду Вам очень благодарен за дельный совет!

    [Ответить]

    Денис Черников ответил:

    Здравствуйте! Такая мелочь, как курсор на скорость не влияет!

    [Ответить]

  15. gkozhushnyi

    Печально но я не нашел строчку

    body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left;}

    Уже как не просматривал, даже копировал все с css в блокнот и там вбивал body, результатов нету, может все из за того что сам шаблон себе делал?

    [Ответить]

    Денис Черников ответил:

    Так в чём проблема-то, допишите недостающие элементы и протестируйте работоспособность!

    [Ответить]

  16. gkozhushnyi

    Эм, в любом месте можно впихнуть этот код???

    [Ответить]

    Денис Черников ответил:

    Ну у тебя body что вообще нет?

    [Ответить]

    gkozhushnyi ответил:

    Есть попадается отдельно...просто слово, строки как у тебя нету.

    [Ответить]

    Денис Черников ответил:

    Вот ты и добавь!

    [Ответить]

  17. gkozhushnyi

    Минут пять назад добавил) не знал куда, и добавил просто в самый низ, в итоге ничего не произошло =(

    [Ответить]

    Денис Черников ответил:

    Возьми и рядом со своим body пропиши недостающие стили и адрес картинки курсора!

    [Ответить]

    gkozhushnyi ответил:

    Так это должно выглядеть?

    body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left; cursor:url (world-gk.ru/cur116.cur), default;}

    [Ответить]

    Денис Черников ответил:

    Всё что до cursor:url не нужно, это стили оформления страницы и даны, как пример!

    [Ответить]

    gkozhushnyi ответил:

    body{cursor:url (world-gk.ru/cur116.cur), default;}

    такой вариант тоже не срабатывает.

    Денис Черников ответил:

    Тогда ищите другой способ. У меня работает и у многих тоже! Вы адрес к картинке не правильно прописали!

  18. gkozhushnyi

    Почему не правильно, у меня она в корне сайта находится.

    [Ответить]

    Денис Черников ответил:

    А кто будет http:// дописывать!?

    [Ответить]

    gkozhushnyi ответил:

    Дописал, но к сожалению не сработало =(

    [Ответить]

    Денис Черников ответил:

    Кэш то надеюсь чистили?

    [Ответить]

  19. gkozhushnyi

    Да, куки и кеш, все снес.

    [Ответить]

    Денис Черников ответил:

    Ищите другое решение тогда или анализируйте это и попытайтесь понять почему не работает!

    [Ответить]

  20. ЛиСи4кА ;3

    Большое спасибо автору за статью! Но есть вопрос: указатель мыши в таком виде только когда им просто водишь по экрану сайта, но если навести на ссылку, то он принимает вид, который настроен в системе на компьютере. Можно это тоже изменить?

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

    Думаю, что можно, но я не пробовал!

    [Ответить]

  21. Dallas

    Спасибо вам огромное ! Всё получилось))

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, обращайтесь!

    [Ответить]

  22. Виктор

    Я работаю почти со всеми браузерами ( где лучше идёт) и только в соцсетях. Порой мучаюсь чтобы найти курсор (глаза уже не те , а активность большая) Как сделать его заметным (может быть насадить цветной шарик) и путь к pnjve

    [Ответить]

    Денис Черников ответил:

    Есть анимированные курсоры, используйте их!

    [Ответить]

  23. Руслан Юнусов

    Спасибо!В случаен с MODX путь прописал не много по другому top;cursor:url (/cursor.cur), default;

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

    [Ответить]

Сообщение

Вверх