Написать сей меня пост сподвигнул вопрос Ильи об установке кода вот из этой заметки. Данный код я упростил и использовал только для текстовых ссылок (в заметке он так же применяется для превьюшек). Смысл таков: при наведении мышки на текстовую ссылку, рядом с ней появляется картинка, которую вы заранее подготовили конкретно для этой ссылки. Зачем это нужно? Для форсу бандитского. Хотя можно, например, прикручивать скрины каких-нибудь программ, игр и т.п.
Итак, вот код для листа стилей 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 с какими правилами добавленный код может конфликтовать. В частности, с упомянутыми глобальными правилами, заданными звездочкой *.
Спасибо, Игорь! Быстрая работа! Однако смутили возможные траблы, поскольку найти кто с кем будет конфликтовать…
А я о своём опыте. Получилось, причем очень успешно, НО! Только на локальном. WP 2.6.1 дома показывает как задумано, две ссылки со скрытыми картинками, которые появляются при наведении на ссылки(текстовые).
Работает на 4-х браузерах, никаких косяков.
Делаю то же самое на сервере, меняя правила CSS в точности как на локальном, точно такие же ссылки - а не работает! Картинки видны сразу, и эффекта нет. В чем дело - целый день попыток выяснить ни к чему не привел. Жалко времени и сил.
Ответить
Снова приходится удивляться непредсказуемости поведения браузеров! Пробую предложенный здесь вариант, так у меня IE6 и Opera показывает прекрасно, а Мозилла не показывает ничего. Но это пока локальный вариант, а что будет в сети? Попробую - расскажу.
Спасибо, Игорь!
Ответить
Не за что, Илья! :) Пробуйте. Пример весьма интересен. В том числе и своими глюками. Позиционирование вообще штука неоднозначная. Обязательно еще о ней напишу.
Ответить
А можно ли адаптировать данную фичу, чтобы изображение появлялось всегда в одном месте.
Т.е. есть блок ссылок. Каждая на отдельной строчке. Они запиханы в div “menu”. Первая ссылка изображение появляется так, как надо. Вторая ссылка - изображение смещается вниз, становится как бы наравне со второй ссылкой и т.д. Нужно, чтобы все изображения появлялись в том же месте, что и первое. Реально такое осуществить?
Ответить
Дмитрий, можно. В следующем посте я покажу как этого можно добиться.
Ответить
Игорь, спасибо. Очень пригодится данная штука.
Буду ждать с нетерпением.
Ответить
Интересное и очень простое решение. Но подскажите, можно ли сделать тоже самое но применительно к картинке - т.е. наводим курсор на одну картинку - получаем вторую?
Ответить
Дмитрий, возможно все! :) Если нужно получить ролловер как лого на данном блоге, то могу рассказать, как легко это сделать.
Если же нужно в предложенном выше примере заменить текстовую ссылку картинкой, то делается это элементарно заменой одного другим.
Ответить
Простите..можете на примере?
Как изменить его по вашей методе?
Спасибо.
Ответить
rattanpr.ru посмотрите как у меня реадизовано, и пожалуйста, пояснить, как реализовать это по вашему примеру?
Ответить
Отличный пример! Искал и наконец нашёл. Во всех браузерах работает, только вот в Opera такая проблема: появился скроллинг центрального поля и общего окна. Можно это исправить?
Спасибо!
Ответить
Замечательное решение! С помошью него реализовал нужную мне вещь, вот: http://versalhome.ru/%D0%9A%D0%BB%D0%B0%D1%81%D1%81%D0%B8%D0%BA%D0%B0_%D0%B2_%D1%88%D1%82%D0%BE%D1%80%D0%B0%D1%85/
Но возникает проблема в Файерфоксе и Опере. Если водить курсор горизонтально по изображениям, то не всегда открываются увеличенные. Может подскажите как это решить*
Ответить
Андрей, а как добиться появления картинки всегда в строго определенном месте?
Ответить
Это делается в css стиле. Для одного из изображений у меня происано:
.popup1 span img {
border-width: 0;
padding-left: 105px;
margin-top: -261px;
}
Обратите внимание, что для каждой картинки popup и прочее, должны быть свои. Потому что тут задаются координаты относительно расположения маленькой картинки.
Полностью выглядет так
.popup {
position: relative;
z-index: 1;
}
.popup2 {
position: relative;
z-index: 1;
}
.popup3 {
position: relative;
z-index: 1;
}
.popup4 {
position: relative;
z-index: 1;
}
.popup5 {
position: relative;
z-index: 1;
}
.popup:hover {
background-color: transparent;
z-index: 2;
}
.popup2:hover {
background-color: transparent;
z-index: 2;
}
.popup3:hover {
background-color: transparent;
z-index: 2;
}
.popup4:hover {
background-color: transparent;
z-index: 2;
}
.popup5:hover {
background-color: transparent;
z-index: 2;
}
.popup span {
position: absolute;
visibility: hidden;
}
.popup2 span {
position: absolute;
visibility: hidden;
}
.popup3 span {
position: absolute;
visibility: hidden;
}
.popup4 span {
position: absolute;
visibility: hidden;
}
.popup5 span {
position: absolute;
visibility: hidden;
}
.popup span img {
padding-left: 10px;
margin-top: -70px;
}
.popup2 span img {
padding-left: 105px;
display:block;
margin-top: -261px;
}
.popup3 span img {
padding-left: 10px;
display:block;
margin-top: -261px;
}
.popup4 span img {
padding-left: 105px;
display:block;
margin-top: -356px;
}
.popup5 span img {
padding-left: 10px;
display:block;
margin-top: -356px;
}
.popup:hover span {
visibility: visible;
}
.popup2:hover span {
visibility: visible;
}
.popup3:hover span {
visibility: visible;
}
.popup4:hover span {
visibility: visible;
}
.popup5:hover span {
visibility: visible;
}
Ответить
От себя лишь добавлю, что одинаковые наборы правил можно объединить. Например:
.popup:hover span, .popup2:hover span, .popup3:hover span, .popup4:hover span, .popup5:hover span {
visibility: visible;
}
Ответить
Уважаемый Игорь. Не поможите решить мою проблему?
12й пост.
Ответить
Я думаю, что это из-за ошибок в задании размеров элементов. Вот, к примеру, задана ширина ячейки:
td width=”85px” и следом в пределах этой же ячейки идет большая картинка в 520 пикселей по ширине: img width=”520px”. Пусть даже она имеет свойство visibility: hidden, однако это ничего не меняет. Картинка может быть невидима для посетителя, но браузер ее “видит” очень хорошо. Нельзя в малое втиснуть большое.
Ответить
Не совсем так. Но вы направили меня на верный путь))
Ошибка исправилась когда я поместил все фотки в одну ячейку таблицы.
Ответить
Скажите пожалуйста, не получается убрать линию под тестом, как её убрать?
Ответить
Здравствуйте, Артем! О какой линии идет речь? О подчеркивании у ссылки?
Ответить
http://life.versal.cn.ua/category/vino-bokala/ - посмотрите плиз… во всех браузерах вроде нормально, а опера начинает выделываться… При положении прокрутки в одном положении отображает по одному… при другом по другому… Может это из за таблиц в посте? Но картинки не всегда полностью отобржаються…
Ответить
Да и ещё… в эксплорере отображат вроде всю картинку но только за ссылками…
Ответить
Олег, у вас ссылка прописана не до конца. Есть только
a class="thumbnail"т.е. у ссылки отсутствует составная часть кода - href. Более того, я бы не рекомендовал вам использовать данный эффект на движке Вордпресс. У этого движка есть гораздо более интересное решение: небольшие превьюшки, при наведении на которые появляется большая картинка. Это будет намного нагляднее.
Кстати, на самом деле реально в Киеве купить французское BORDEAUX Classic Rouge Calvet 2005 за 105 грн? Я бы с удовольствием приобрел парочку бутылочек :)
Ответить
Это не в Киеве. Это в Чернигове. :) Да цены реальные. :) Могу кинуть винную карту этого бара. :) Но только на почту. А по поводу решения спасибо… Буду искать другой вариант на вордпресе…
Ответить
Отлично! Как раз собираемся ближе к весне в Чернигов скататься погулять-пофоткать. Киньте, плз, винную карту на мыло kventori@yandex.ru
Ответить
Отправил карту ВИН… А плагин или варинт вывода картинки так и немогу найти подходящий на вордпресс… Может подскажешь если есть опыт с этим?
Ответить
Ага, получил. Спасибо! Про плагин так навскидку не скажу, но поищу и, скорее всего, оформлю новым постом на блоге.
Ответить
Здравствуйте. Подскажите, пожалуйста, возможно ли показать слой, если он не лежит в теге а, например:
namesend message
.popup {
position: absolute;
border: 1px solid #000;
background: #fff;
display:none;
width:150px;
height:70px;
top:130px;
}
a:hover .popup {
display: block;
}
Ответить