Главная->Уроки по css->Делаем подсказки к ссылкам на CSS
Делаем подсказки к ссылкам на 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
