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

НАВЕДИ НА МЕНЯ КУРСОР

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

Я подробно опишу порядок действий для сайтов на CMS WordPress, однако работать эта функция, при грамотном подходе, будет на сайтах любого типа.

Так выглядит код самой ссылки:

<a class="imagetip" href="ВАША_ССЫЛКА" target="_blank">"АНКОР ССЫЛКИ"<span><img class="alignnone" src="ССЫЛКА_НА_НЕОБХОДИМОЕ ИЗОБРАЖЕНИЕ" /></span></a>

Разбирать подробно этот код не имеет особого смысла, поскольку все и так очевидно. Параметр target="_blank" говорит о том, что ссылка будет открываться в новом окне, используйте его на свое усмотрение.
Теперь нам необходимо создать css класс imagetip. Для этого в панели администрирования вашего сайта переходим на вкладку "Внешний вид" - "Редактор", находим файл style.css, который, скорее всего, откроется в редакторе сразу по умолчанию, и в самый конец вставляем следующий код:

.imagetip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 270px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;
    width: 20%;
    z-index: 9999;
}
.imagetip:hover span{
visibility: visible;
}

После этого, можете проверить его работоспособность и откорректировать визуализацию в соответствии со своими предпочтениями, изменяя параметры кода.

Если у вас что-то не получилось или вы ничего не поняли после прочтения - пожалуйста, пишите в комментариях, будем разбираться вместе. Кроме того, интересен ваш опыт применения функции "появления картинок при наведении на ссылку" на ваших сайтах.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

6 комментариев к записи “Появление изображений при наведении на ссылку”

  1. Вставил, как в примере, но почему-то вместе с картинкой в том-же окошке появляется текст ссылки на картинку

  2. Макс:

    Спасибо
    Очень помогли..

  3. Антон:

    Огромное спасибо за столь пустяковый совет который я искал почти час в сети…

  4. eslo:

    Статья хорошая. А вот как сделать при наведение на картинку что с права левая картина изменила цвет ну типо правые варианты цветов а левая товар которая меняется в цвете.

  5. Спасибо за код, симпатично получается!

  6. User:

    border-radius задублирован, а в остальном спасибо за очень простое и эстетичное решение. Сделал на нем левое вертикальное меню с появляющейся справа картинкой с подписью (да, к картинке можно добавить текст). Получилось очень удобно для посетителей, и смотрится красиво.

Оставить комментарий

Яндекс.Метрика