Title: Отображения изображений при кликенаведении на слова
Last modified: 01.08.2016

---

# Отображения изображений при кликенаведении на слова

 *  [kud](https://ru.wordpress.org/support/users/kud/)
 * (@kud)
 * [13 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bf%d1%80%d0%b8-%d0%ba%d0%bb%d0%b8%d0%ba%d0%b5%d0%bd%d0%b0/)
 * Салют!
    Подскажи пожалуйста плагин, который может попапом вытягивать картинку
   при наведении\клике на слово в тексте. что-то в таком духе, только нарядней надо:
   [http://www.websovet.com/any/primerpopap/primerpopap.html](http://www.websovet.com/any/primerpopap/primerpopap.html)

Просмотр 3 ответов — с 1 по 3 (всего 3)

 *  [skodnik](https://ru.wordpress.org/support/users/skodnik/)
 * (@skodnik)
 * [13 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bf%d1%80%d0%b8-%d0%ba%d0%bb%d0%b8%d0%ba%d0%b5%d0%bd%d0%b0/#post-87920)
 * Тут нет никакого плагина, это просто такая форма разметки, что-то похожее происходит
   и с многоуровневыми меню.
 * Для реализации потребуется определенная форма разметки контента и несколько строк
   стилей. В приведенном примере они очевидны, если нет, готов пояснить.
 * Нарядность, например плавное появление/затухание и прочее можно сделать с помощью
   js или css3.
 *  Автор [kud](https://ru.wordpress.org/support/users/kud/)
 * (@kud)
 * [13 лет, 10 месяцев назад](https://ru.wordpress.org/support/topic/%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bf%d1%80%d0%b8-%d0%ba%d0%bb%d0%b8%d0%ba%d0%b5%d0%bd%d0%b0/#post-88033)
 * Буду признателен за пояснение.
    Заранее спасибо.
 *  [skodnik](https://ru.wordpress.org/support/users/skodnik/)
 * (@skodnik)
 * [13 лет, 9 месяцев назад](https://ru.wordpress.org/support/topic/%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bf%d1%80%d0%b8-%d0%ba%d0%bb%d0%b8%d0%ba%d0%b5%d0%bd%d0%b0/#post-88045)
 * Итак, разметка — `<a class="popup" href="#">Ссылку<span><img src="primer.jpg"
   alt="primer" /></span></a>`. Здесь ссылка в которой находится текст «_Ссылку_»
   и `span` которым обернуто изображение. Все предельно просто, но вполне можно 
   и `span` убрать.
 * Основная идея в том, что `span` скрыт в обычном состоянии так:
 *     ```
       .popup span {
           position: absolute;
           visibility: hidden;
       }
       ```
   
 * И появляется он при наведении указателя мыши на родителя, т.е. на ссылку, реализовано
   так:
 *     ```
       .popup:hover span {
           visibility: visible;
           top: 0;
           left: 80px;
       }
       ```
   
 * Чтобы появляющаяся картинка располагалась рядом со ссылкой у ссылки устанавливается`
   position: relative;`, а у вложенного `span` — `position: absolute;`.

Просмотр 3 ответов — с 1 по 3 (всего 3)

 Тема «Отображения изображений при кликенаведении на слова» закрыта для новых ответов.

## Метки

 * [клик](https://ru.wordpress.org/support/topic-tag/%d0%ba%d0%bb%d0%b8%d0%ba/)
 * [плагин](https://ru.wordpress.org/support/topic-tag/%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd/)
 * [попап](https://ru.wordpress.org/support/topic-tag/%d0%bf%d0%be%d0%bf%d0%b0%d0%bf/)
 * [popup](https://ru.wordpress.org/support/topic-tag/popup/)

 * Форум: [Плагины](https://ru.wordpress.org/support/forum/plugins-and-hacks/)
 * 3 ответа
 * 2 участника
 * Последний ответ: [skodnik](https://ru.wordpress.org/support/users/skodnik/)
 * Последняя активность: [13 лет, 9 месяцев назад](https://ru.wordpress.org/support/topic/%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bf%d1%80%d0%b8-%d0%ba%d0%bb%d0%b8%d0%ba%d0%b5%d0%bd%d0%b0/#post-88045)
 * Статус: нерешённая

## Темы

### Самые популярные темы

### Темы без ответов

### Без вопроса

### Решённые

### Нерешённые

### Все темы