Всплывающие подсказки для ссылок

Из этого урока Вы узнаете, как при помощи CSS создать всплывающие подсказки для ссылок.

Эффект всплывающих подсказок для ссылок основан на применении атрибута display и его значений block совместно с абсолютным позиционированием подсказки и none. Этот атрибут определяет, должен ли элемент быть показан в документе (block) или нет (none).

Свойство display:none отличается от похожего на него visibility:hidden тем , что оно не резервирует пустое пространство под элементом, а временно удаляет его из документа, а visibility:hidden хотя и делает элемент невидимым, а точнее полностью прозрачным, место, которое он занимает, остаётся за ним.

Всплывающая подсказка выводится в браузерах IE7 и выше, Mozilla Firefox. В Opera выводится не корректно - не соблюдаются координаты абсолютного позиционирования.

Для реализации всплывающей подсказки пропишем следующие стили CSS между тегами body (или в таблице стилей):

<style type="text/css">
.prompt { position:relative; }
.prompt span { display:none }
.prompt:hover {z-index:1; text-decoration:none }
.prompt:hover span { display:block;
position:absolute;
width:170px;
top:-60px;
left:30px;
background-color:#F8F8FF;
border: 1px solid #B51F21;
padding:5px;
font-size:11px;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif
}
</style>

Ссылку пишите следующим образом:

<a href="http://yoursite.ru" class="prompt"><span><font color="#FF0000"><strong>Внимание!!!</strong></font> Ссылка ведёт в никуда. <font color="#CC6600">;-)</font>. Это образец всплывающей подсказки.</span>Наведи на меня указатель мыши!</a>

А вот результат нашего труда:

Внимание!!! Ссылка ведёт в никуда. ;-). Это образец всплывающей подсказки.Наведи на меня указатель мыши!

Между тегами span вводится текст подсказки, который всплывает при наведении на ссылку курсора мыши.

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


Опубликовано: 11.10.2010 07:59

Просмотров всего: 1708



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

Для обновления картинки кликните по ней.

Комментарии:

Нет комментариев.