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;
}
А это HTML код для вставки на страницу сайта:
<p>Это пример всплывающей (popup) картинки<br /> при наведении указателя мыши на <a class="popup" href="#">Ссылку<span><img src="primer.jpg" alt="primer" /></span></a>. А это последующий текст, чтобы показать, что картинка "наползает" на текст.</p>
Как это работает? Сначала напомню об абсолютном позиционировании 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 картинка иногда показывается не полностью. От чего это зависит, я так и не понял.
Как использовать этот эффект в блоге на WordPress. Например, можно выделить в тексте нужное слово и сделать его ссылкой. Затем в режиме Кода прописать для этой ссылки класс popup, добавить тэги span, между которыми загрузить картинку привычным способом. Получится что-то вроде этого:
<a class="popup" href="#">Ссылка<span><img src="primer.jpg" alt="primer" /></span></a>
Разумеется, чтобы это все заработало, необходимо добавить указанные выше правила в лист стилей CSS используемой темы.
Но возможно, что код все-таки будет работать некорректно. Тогда ищите в файле CSS с какими правилами добавленный код может конфликтовать. В частности, с упомянутыми глобальными правилами, заданными звездочкой *.
