Pop-up изображения для текстовых ссылок

Pop-up изображения для текстовых ссылок

Написать сей меня пост сподвигнул вопрос читателя об установке кода вот из этой заметки. Данный код я упростил и использовал только для текстовых ссылок (в заметке он так же применяется для картинок-превьюшек).

Смысл трюка таков: при наведении указателя мыши на текстовую ссылку, рядом с ней появляется картинка, которую вы заранее подготовили конкретно для этой ссылки. Зачем это нужно? Для форсу бандитского. Хотя можно, например, прикручивать скрины каких-нибудь программ, игр и т.п.

Итак, вот код для листа стилей style.css:

p {
font-size: 24px;
}

.popup {
position: relative;
z-index: 1;
}

.popup:hover {
background-color: transparent;
z-index: 2;
}

.popup span {
position: absolute;
visibility: hidden;
}

.popup span img {
border-width: 0;
padding: 2px;
}

.popup:hover span {
visibility: visible;
top: 0;
left: 80px;
}

А это код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Пример попап картинки для текстовой ссылки</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Это пример всплывающей (popup) картинки<br /> при наведении указателя мыши на <a class="popup" href="#">Ссылку<span><img src="primer.jpg" alt="primer" /></span></a>. А это последующий текст, чтобы показать, что картинка "наползает" на текст.</p>
</body>
</html>

Для упрощения в работающем примере я поместил стили непосредственно в код страницы.

Как это работает? Сначала напомню об абсолютном позиционировании (position: absolute;) и относительном позиционировании (position: relative;).

Первый тип задает смещение объекта, к которому применено такое позиционирование, относительно родительского элемента. То есть, он привязан только к тому блоку или тому тэгу, в пределах которого располагается сам. В остальном же он не подчиняется нормальному потоку.

В нашем случае объект – изображение помещен в тэги span, которые в свою очередь находятся внутри ссылки (тэг «а») с классом popup.

Второй тип — относительное позиционирование — напротив, располагается в соответствии с нормальным потоком, но затем смещается на определенное количество пикселей, заданных значениями свойств top, bottom, left, right. Последующие за ним объекты располагаются так, словно предыдущий объект не был смещен.

Но в нашем примере есть еще один тип позиционирования. Это, так называемое, «трехмерное» смещение.

Если абсолютное и относительное — это смещение по вертикальной и горизонтальной осям, то трехмерное, именуемое иначе z-index, чем-то похоже на слои в программе Фотошоп. Оно словно в стопку собирает различные элементы.

Задается такое смещение просто: z-index: 1; z-index: 2; z-index: 3; и т.д. То есть, чем выше номер, тем один объект располагается выше над другим. Понятное дело, что таким образом можно реализовать как бы «наползание» одного элемента на другой.

У нас получается, что изначально картинка для ссылки расположена на первом слое и, кроме того, она спрятана (visibility: hidden;). При наведении мыши (срабатывает свойство hover), картинка появляется уже на втором слое и становится видимой (visibility: visible;).

При этом можно задать смещение картинки относительно ссылки. Что мы и сделали в последнем правиле.

Какие могут возникнуть траблы? Во-первых, данный код не работает в ИЕ, если в самом начале листа стилей CSS заданы глобальные правила:

* {
margin: 0;
padding: 0;
border: 0;
}

Во-вторых, в Опере 9 картинка иногда показывается не полностью. От чего это зависит, я так и не понял.

Как использовать этот эффект в блоге на Вордпресс. Например, можно выделить в тексте нужное слово и сделать его ссылкой. Затем в режиме Кода прописать для этой ссылки класс popup, добавить тэги span, между которыми загрузить картинку привычным способом. Получится что-то вроде этого:

<a class="popup" href="#">Ссылка<span><img src="primer.jpg" alt="primer" /></span></a>

Разумеется, чтобы это все заработало, необходимо добавить указанные выше правила в лист стилей CSS используемой темы. Но возможно, что код все-таки будет работать некорректно. Тогда ищите в файле CSS с какими правилами добавленный код может конфликтовать. В частности, с упомянутыми глобальными правилами, заданными звездочкой *.

Пример работы данного кода.

20.09.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

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

Оставить комментарий: