Разное

При наведении на ссылку появляется картинка: Всплывающая картинка при наведении на ссылку

08.08.2023

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 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 href="#">Ссылка<span><img src="primer.jpg" alt="primer" /></span></a>

Разумеется, чтобы это все заработало, необходимо добавить указанные выше правила в лист стилей CSS используемой темы.

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

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

Как убрать title при наведении курсора на изображение

egor
Форумчанин