Делаем подсказки к ссылкам на CSS

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

Пример того, что мы должны получить, Вы можете посмотреть на следующей строке. Просто наведите курсор мыши на любую ссылку:

Если Вы нажмете на эту ссылку, то попадете на мой блог.Ссылка на мой блог с подсказкой! | Внимание! Ни в коем случае не нажимайте на эту ссылку, иначе Вы попадете на сайт о фотошопе!Ссылка предупреждение!

Итак, как же это реализуется?

Шаг 1.

Создайте стиль (в Вашей таблице стилей или на самой странице через <style></style> между тэгами <head></head>) для первой (информационной) подсказки:

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

для второй (предупреждающей):

.warning { position:relative; z-index:24;  }
.warning span { display:none; }
.warning:hover {z-index:25;}
.warning:hover span {
display:block;
z-index:25;
position:absolute;
width:250px;
top:25px;
left:20px;
background:#FCE4E4 url(warning.gif) no-repeat left;
border: 1px solid #990000;
padding:5px 5px 5px 35px;
font-size:11px;
color:#990000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

Шаг 2.

На страницу сайта добавляйте ссылки в таком формате:

<a href="http://www.evgeniypopov.com/blog.php" class="tooltip" target="_blank"><span>Если Вы нажмете на эту ссылку, то попадете на мой блог.</span>Ссылка на мой блог с подсказкой!</a>

это если Вам нужен был первый (информационный) тип подсказки и в таком:

<a href="http://www.photoshop-master.ru" class="warning" target="_blank"><span>Внимание! Ни в коем случае не нажимайте на эту ссылку, иначе Вы попадете на сайт о фотошопе!</span>Ссылка предупреждение!</a>

если нужен второй (предупреждающий) тип подсказки.

т.е. саму подсказку Вы помещаете между тэгами , которые находятся внутри ссылки, и которых не видно до тех пор, пока на ссылку не наведут курсор мыши.

Если Вы заметили, в подсказке второго типа используется изображение. Его можно взять здесь. Положить картинку нужно в ту же папку, где лежит сама страница. Либо можно положить куда угодно, но при этом не забудьте прописать к ней верный путь в CSS строке background.

Если Вы знаете CSS, то можете спокойно менять размеры подсказки, фоновый цвет, рамку и т.д.

Эффект работает во всех современных браузерах.

Основано на уроке с сайта yodrive.com

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.yodrive.com
Перевел: Евгений Попов
Урок создан: 26 Сентября 2008
Просмотров: 37641
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^