Всплывающее изображение при наведении на ссылку

Категория: CSS Опубликовано: 04.04.2017

Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.

эффект всплывающего изображения

Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!

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

<html>

<head>

<title>При наведении на текст, отображается скрытый графический контент</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

.stimylrosta-com-ua-div

{

display: none;

}

a.stimylrosta-com-ua-ssilka:hover+div

{

display: block;

}

</style>

</head>

<body>

<a href="#">Смелее!!! Наведи на меня курсор!</a>

<div><img src="#" class="spoilerimage" data-src="/mail-images/sallivan.png" alt="салли></div>

</body>

</html>

 

При наведении на текст, отображается скрытый графический контент Смелее!!! Наведи на меня курсор!
салли

 

Давайте я вкратце объясню главные моменты. Дабы вывести всплывающее изображение нужно обратиться к тегу <img> с атрибутом src и после знака равно в кавычках прописать путь к изображению, предварительно закачав его в корневую папку сайта.

Тег <а> с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).

В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh. Параметры задаются в пикселях.

Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.

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

Всплывающий текст при наведении на ссылку

<html>

<head>

<title>При наведении на текст всплывает текстовая подсказка</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

.stimylrosta-com-ua-div

{

display: none;

}

a.stimylrosta-com-ua-ssilka:hover+div

{

display: block;

}

</style>

</head>

<body>

<a href="#">Смелее!!! Наведи на меня курсор!</a>

<div>Здорово!!! Все получилось:)</div>

</body>

</html>

Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.

 

При наведении на текст всплывает текстовая подсказка Смелее!!! Наведи на меня курсор!
Здорово!!! Все получилось:)

 

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

<html>

<head>

<title>При наведении на текст, картинка исчезает</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

.stimylrosta-com-ua-div

{

display: block;

}

a.stimylrosta-com-ua-ssilka:hover+div

{

display: none;

}

</style>

</head>

<body>

<a href="#">Смелее!!! Наведи на меня курсор!</a>

<div><img src="#" class="spoilerimage" data-src="/mail-images/sallivan.png" alt="салли" title="Корпорация монстров - Салливан"></div>

</body>

</html>

Для добавления определенного вышеприведенного эффекта достаточно скопировать подходящий вам код и вставить его в текстовый редактор. Таким образом, ссылку со всплывающим/исчезающим изображением можно прописать в любом месте статьи.

рупор

Важный момент! Каждый из представленных скриптов не вредит валидности сайта.

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

Всплывающая картинка CSS

.thumbnail{ 

position: relative; 

z-index: 0; 

.thumbnail:hover{ 

background-color: transparent; 

z-index: 50; 

.thumbnail span{ /*CSS for enlarged image*/ 

position: absolute; 

background-color: #3d3d3d; 

padding: 5px; 

left: -1000px; 

border: 1px solid white; 

visibility: hidden; 

color: green; 

text-decoration: none; 

border-radius: 4px 4px 4px 4px;

-moz-border-radius: 4px 4px 4px 4px;

-webkit-border-radius: 4px 4px 4px 4px;

.thumbnail span img{ /*CSS for enlarged image*/ 

border-width: 0; 

padding: 2px; 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 

visibility: visible; 

top: 0; 

left: 60px; /*position where enlarged image should offset horizontally */ 

}

Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:

<a href="#">Ссылка<span>Здесь описание<img src="/ВАША КАРТИНКА" width="500"/></span></a>

Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.

<style type="text/css">

a img {

border:none;

}

.thumbnail{

position: relative;

z-index: 0;

}

.thumbnail:hover{

background-color: transparent;

z-index: 50;

}

.thumbnail span{

position: absolute;

background-color: #ffffff;

padding: 5px;

left: -1000px;

border: 1px dashed gray;

visibility: hidden;

color: dreen;

text-decoration: none;

}

.thumbnail span img{

border-width: 0;

padding: 2px;

}

.thumbnail:hover span{

visibility: visible;

top: 0;

left: 60px;

}

#counter {

display:none;

text-align:center;

}

</style>

А вот эту часть кода нужно расположить в том месте, где должна отображаться ссылка:

<a href="#">Load<span><img src="/mail-images/sallivan.png" alt="sallivan" width="150" height="150" /><br />Hey! How are you?</span></a>

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

Код нужно вставить в самом конце сего файла либо перед открывающимся тегом <head>.

Если вы пользуетесь CMS (Joomla, WordPress), то для вставки ссылки можно воспользоваться модулем, отображающим на сайте фрагменты HTML, называемым «HTML-код», предварительно установив используемый текстовый редактор в положение редактирования кода. Этот способ актуален в случае, когда необходимо установить ссылку со всплывающим изображением в определенной модульной позиции вашего сайта.

Надеюсь, статья оказалась вам полезной, и теперь вы знаете, как сделать всплывающую картинку.

И помните, каждый автор, написавший полезную статью, заслуживает на комментарий, минимум репост.

Спасибо за внимание и до скорого на страницах Stimylrosta.

Не ленитесь, поделитесь!

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

Просмотров: 595

Добавить комментарий


Защитный код
Обновить

X

Добро пожаловать!

Видимо вы используете браузерное расширение AdBlock, отвечающее за блокировку рекламы. Этот веб-проект существует и развивается за счет рекламных объявлений. Пожалуйста, внесите его в белый список. Заранее премного благодарен. Как отключить AdBlock

Читайте также

Экранная линейка mySize - бесплатная программа для веб-разработчиков и дизайнеров

Экранная линейка mySize - бесплатная программа для веб-разработчиков и дизайнеров

Подробнее
Как сделать скриншот экрана

Как сделать скриншот экрана

Подробнее
Как открыть ссылку в новом окне

Как открыть ссылку в новом окне

Подробнее
Что такое вода в тексте

Что такое вода в тексте

Подробнее