Приветствую Вас Гость • Регистрация • Вход
Воскресенье, 22.9.2019
Главная » 2015 » Июль » 12 » Оформление всплывающих подсказок для ссылок
17:06
Оформление всплывающих подсказок для ссылок

Подcказки для ссылок с помощью css3 Подсказка для ссылки зачастую помогает пользователю быстрее ориентироваться на сайте, а значит и получать быстрее нужную информацию. Стандартная подсказка выглядит тускло и при этом приходится ждать её появления порядка 3 секунд.Ранее мы рассматривали Всплывающие окна с подсказками (ToolTip).
В этой статье я опишу как сделать красивую подсказку для ссылок, которая появляется моментально при наведение курсора мышки на ссылку.
Стоит заметить, что для этого существует множество способов реализации, но почти все они предполагают большую нагрузку из-за множества эффектов. Этот способ прост тем, что практически не грузит браузер и не требует загрузок картинок.
Перейдем непосредственно к описанию.
1. Скачайте следующий архив: tooltip.rar.
2. В архиве будет лежать единственный файлик tooltip.js
3. Подключите этот файл к себе на сайт в корень(можете его переименовать). Для этого в любом месте сайта напишите:

Код
<script type="text/javascript" language="JavaScript" src="/tooltip.js"></script>

Настройка
В самом верху файла tooltip.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 - цвет шрифта.
Эти параметры нужно настраивать конкретно под Вашу цветовую гамму на сайте. После этого на сайте у всех ссылок где прописан атрибут title и alt будет всплывать подсказка с описанием, которую вы укажите при заполнении полей.

Категория: CSS | Просмотров: 494 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика