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

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тут нет никакого плагина, это просто такая форма разметки, что-то похожее происходит и с многоуровневыми меню.

    Для реализации потребуется определенная форма разметки контента и несколько строк стилей. В приведенном примере они очевидны, если нет, готов пояснить.

    Нарядность, например плавное появление/затухание и прочее можно сделать с помощью js или css3.

    Буду признателен за пояснение.
    Заранее спасибо.

    Итак, разметка — <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;, а у вложенного spanposition: absolute;.

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тема «Отображения изображений при кликенаведении на слова» закрыта для новых ответов.