Делаем подсказки к ссылкам на 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
Просмотров: 37917
Правила перепечатки

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

^ Наверх ^