Написать сей меня пост сподвигнул вопрос Ильи об установке кода вот из этой заметки. Данный код я упростил и использовал только для текстовых ссылок (в заметке он так же применяется для превьюшек). Смысл таков: при наведении мышки на текстовую ссылку, рядом с ней появляется картинка, которую вы заранее подготовили конкретно для этой ссылки. Зачем это нужно? Для форсу бандитского. Хотя можно, например, прикручивать скрины каких-нибудь программ, игр и т.п.
Итак, вот код для листа стилей 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
Отправил карту ВИН… А плагин или варинт вывода картинки так и немогу найти подходящий на вордпресс… Может подскажешь если есть опыт с этим?
Ага, получил. Спасибо! Про плагин так навскидку не скажу, но поищу и, скорее всего, оформлю новым постом на блоге.