Понедельник, 18.11.2019, 22:41
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Как сделать красивую подсказку для ссылки

Как сделать красивую подсказку для ссылки

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

Стоит сказать, что для этого существует множество способов реализации, но почти все они предполагают большую нагрузку из-за множества эффектов. Мой способ прост тем, что практически не грузит браузер и не требует загрузок картинок. Перейдем непосредственно к описанию.

1. Скачайте следующий архив: podskazka.rar.

2. В архиве будет лежать единственный файлик podskazka.js:

3. Включите этот файл к себе на сайт (можете его переименовать). Для этого в любом месте сайта напишите:

    <SCRIPT type="text/javascript" language="JavaScript" src="podskazka.js"></SCRIPT>

Настройка
В самом верху файлика podskazka.js будут следующие строки:

    var qTipTag = "a,input,span"; var qTipX = 10; var qTipY = 25;

В параметре qTipTag указывается для каких html тегов будет работать подсказка. В qTipX задается отступ всплывающей подсказки по оси Х, в qTipY по оси У. Эти параметры можно менять и делать так, как Вам удобно. Я остановился именно на этих значениях.

4. Теперь нужно прописать стиль для нашей подсказки, чтобы она выводилась в красивой рамке. Для этого отройте Ваш файл со стилями .css (стили) и пропишите в конце:

    div#qTip { padding: 3px; border: 1px solid #666; display: none; background: #e6fff5; color: #000; font-size: 14px; text-align: left; position: absolute; z-index: 1000; opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.9; }

Здесь есть четыре важных параметра:
border: 1px solid #666 - задание толщины рамки и её цвета,
background: #e6fff5 - задание фона рамки,
font-size: 14px - размер шрифта,
color: #000 - цвет шрифта.

Эти параметры нужно настраивать конкретно под Вашу цветовую гамму на сайте (см. коды html цветов для сайта).

После этого на сайте у всех ссылок где прописан атрибут title будет всплывать подсказка с описанием, которую вы укажите.

Читайте также:
• Коды символов для HTML
• Эффект падающих снежинок на сайт
• Добавление социальных кнопок на сайт
• Как сделать фон для сайта
• Как сделать favicon

Перейти в каталог html уроков и советов

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz