Главная » 2013 » Февраль » 3 » Делаем курсор
13:09
Делаем курсор

ВСПЛЫВАЮЩИЕ КАРТИНКИ ИЛИ
КУРСОР ИЗ СВОЕГО ИЗОБРАЖЕНИЯ

Скопировала урок для создания курсора..Надеюсь пригодится..Недавно посетитель блога Андрей (наведите сюда курсор,увидите его аватарку) подсказал мне формулу, по которой можно без труда ставить в запись свой курсор и делать всплывающие картинки.
КАК ЭТО ДЕЛАЕТСЯ


Код в окошечка ниже

Для новичков рассказываю подробнее.

Картинку для курсора можно взять готовую, а можно сделать в любой подходящей программе самим. Всплывающую картинку лучше брать небольшую, желательно в пределах 100рх. Большая не будет отображаться.
Нашли или сделали картинку. Теперь надо получить ее URL ( http-адрес или ссылку ). Самое простое, загрузить изображение на Радикал. Строчка №1 и будет Url картинки.

ДЕЛАЕМ КУРСОР

Для курсора надо брать совсем маленькое изображение. Например, для этого поста я сделала курсор из своей аватарки.

Копируем часть кода ниже
<font style="cursor:URL('URL КАРТИНКИ'),auto;">

Ставим ее в свою новую запись в блоге. ВМЕСТО слов URL КАРТИНКИ ставим 1-ю строчку с Радикала. Не заденьте одинарные кавычки и не оставляйте пробелов! Далее ставим код своего поста или пишем свой текст. В конце вставляем вот это </font>
Всё! Курсор будет отражаться в записи.

ДЕЛАЕМ ВСПЛЫВАЮЩУЮ КАРТИНКУ

Принцип вставки такой картинки тот же, что и с курсором, но только мы вставляем первую часть кода ПЕРЕД теми словами, при наведении на которые должна всплывать картинка, а вторую часть кода ПОСЛЕ этих слов. Так я вставила всплывающую картинку выше, на слова "...Андрей (наведите сюда курсор,увидите его аватарку)..."
Всплывающую картинку можно сделать и к фото. Пример ниже. Наведите курсор на маленькое изображение моего курсора и увидите картинку из которого он сделан.
_avatar180 копия копия (25x30, 4Kb)


Вместо текста вставляется код картинки.
Дополнение: Такая картинка , к сожалению, не видна в некоторых браузерах. Для картинки подходят форматы jpeg и png, формат gif будет отображаться неподвижным. Всё! Удачи!
Просмотров: 86 | Добавил: Alenada | Теги: курсор | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: