Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи 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-код», предварительно установив используемый текстовый редактор в положение редактирования кода. Этот способ актуален в случае, когда необходимо установить ссылку со всплывающим изображением в определенной модульной позиции вашего сайта.
Надеюсь, статья оказалась вам полезной и теперь вы знаете, как сделать всплывающую картинку.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
