Сегодня мы с Вами научимся делать всплывающие подсказки к ссылкам, используя только 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, то можете спокойно менять размеры подсказки, фоновый цвет, рамку и т.д.
Эффект работает во всех современных браузерах.