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

20.09
2008

Рубрики: Верстка |

popapprim.jpg

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

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

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

Digg it Bookmark it Stumble it add to technorati

Комментарии (3) на запись “Pop-up изображения для текстовых ссылок”

  1. Илья 20.09.2008 19:33

    Спасибо, Игорь! Быстрая работа! Однако смутили возможные траблы, поскольку найти кто с кем будет конфликтовать…
    А я о своём опыте. Получилось, причем очень успешно, НО! Только на локальном. WP 2.6.1 дома показывает как задумано, две ссылки со скрытыми картинками, которые появляются при наведении на ссылки(текстовые).
    Работает на 4-х браузерах, никаких косяков.
    Делаю то же самое на сервере, меняя правила CSS в точности как на локальном, точно такие же ссылки - а не работает! Картинки видны сразу, и эффекта нет. В чем дело - целый день попыток выяснить ни к чему не привел. Жалко времени и сил.

  2. Илья 21.09.2008 11:26

    Снова приходится удивляться непредсказуемости поведения браузеров! Пробую предложенный здесь вариант, так у меня IE6 и Opera показывает прекрасно, а Мозилла не показывает ничего. Но это пока локальный вариант, а что будет в сети? Попробую - расскажу.
    Спасибо, Игорь!

  3. Игорь Квентор 21.09.2008 17:37

    Не за что, Илья! :) Пробуйте. Пример весьма интересен. В том числе и своими глюками. Позиционирование вообще штука неоднозначная. Обязательно еще о ней напишу.

Трэкбеки

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




Поиск

Рубрики

Архив



SMS.копилка

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов