Картинка при наведении на ссылку
НАВЕДИ НА МЕНЯ КУРСОР
В некоторых случаях, для предоставления посетителю более наглядной графической информации, требуется, чтобы при наведении курсора мышки на ссылку, появлялась определенная картинка. Довольно востребованным случаем использования данного метода является, например, создание функционального прайс-листа.
Я подробно опишу порядок действий для сайтов на CMS WordPress, однако работать эта функция, при грамотном подходе, будет на сайтах любого типа.
Так выглядит код самой ссылки:
<a href="ВАША_ССЫЛКА" target="_blank">"АНКОР ССЫЛКИ"<span><img src="ССЫЛКА_НА_НЕОБХОДИМОЕ ИЗОБРАЖЕНИЕ" /></span></a> |
<a href=»ВАША_ССЫЛКА» target=»_blank»>»АНКОР ССЫЛКИ»<span><img src=»ССЫЛКА_НА_НЕОБХОДИМОЕ ИЗОБРАЖЕНИЕ» /></span></a>
Разбирать подробно этот код не имеет особого смысла, поскольку все и так очевидно. Параметр
Теперь нам необходимо создать 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;
} |
.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; }
После этого, можете проверить его работоспособность и откорректировать визуализацию в соответствии со своими предпочтениями, изменяя параметры кода.
Если у вас что-то не получилось или вы ничего не поняли после прочтения — пожалуйста, пишите в комментариях, будем разбираться вместе. Кроме того, интересен ваш опыт применения функции «появления картинок при наведении на ссылку» на ваших сайтах.
Это полезно знать:
на Ваш сайт.
Всплывающая картинка при наведении на ссылку на CSS
03.03.2019 iMarketing5
Здравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же
Загляните на мой YouTube канал
Демо
Первое, что нужно сделать, это добавить в файл стилей следующий код:
| .tooltip span{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 200px; background: #fff; box-shadow : -2px 2px 10px -1px #333; border-radius: 5px; } .tooltip:hover span{ visibility: visible; } |
Теперь, к ссылкам нужно прописать класс tooltip и в теге span разместить ссылку на картинку. Выглядит это вот так:
| <a class=»tooltip» href=»#»>Анкор ссылки<span><img src=»image.png»/></span></a> |
С абсолютным позиционированием могут возникнуть проблемы, если вы делаете эффект всплывающих изображений к разным элементам на странице. Картинки могут всплывать не в том месте, где вам нужно. Но это вполне поправимо и можно исправить при помощи отступов. Ну вот, теперь вы знаете как сделать увеличение картинки при наведении мыши с помощью CSS. Используйте данный код для экспериментов, возможно что-то интересное у вас все же получится. при помощи CSS еще можно сделать таблицу зебру. Все вопросы о том, куда вставлять код и т.п. — писать в комментариях. А еще я попрошу вас поделиться этой записью в социальных сетях. Заранее благодарю.
Статья с сайта serblog.ru
Похожие статьи:
Скрипт всплывающая картинка при наведении на картинку
Можно этот стиль применять как в модулях так и на форуме. Вот к примеру вы написали статью вам не нужно кликать на картинку а просто навести на ее курсор и она будит полной, размер такой же который вы заливали на сайт. Все это делается при помощи 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: Yellow;
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=»ВАША КАРТИНКА»/></span></a>
Так же есть еще второй вариант кода. CSS не трогать просто другой код можно сделать чтобы при наведении на картинку появлялась еще картинка например увеличенная очень красиво получается.
Код
<a href=»#»><img src=»ссылка на рисунок» border=»0″ /><span><img src=»ссылка на рисунок» />Ваш текст</span></a>
Как сделать чтобы установить для всех фото чтобы не ставить на каждую?
Смотря для какого модуля Вам нужно, допустим для модуля ФОТОАЛЬБОМ будет так:
Код
<?if($FULL_PHOTO_DIRECT_URL$)?><a href=»#»><img src=»$FULL_PHOTO_DIRECT_URL$» border=»0″ /><span><img src=»$FULL_PHOTO_DIRECT_URL$» border=»0″ />$PHOTO_NAME$</span></a><?endif?>
Размеры выставляйте те, которые Вам нужны.
А можно ли сделать 2 всплывающих картинки, одна под другой?
Да, можно
Код
<a href=»#»><img src=»ссылка на рисунок» border=»0″ /><span><img src=»ссылка на рисунок 1″ /><img src=»ссылка на рисунок 2″ />Ваш текст</span></a>
Источник: megascripts.ru
Выпадающее изображение из ссылки на JavaScript
Вы здесь: Главная — JavaScript — JavaScript Скрипты — Выпадающее изображение из ссылки на JavaScript
Описание: Сегодня я выкладываю достаточно интересный скрипт, который создаёт выпадающее изображение из ссылки на JavaScript. Вы просто наводите мышкой на ссылку и появляется соответствующее изображение, а когда уводите мышку от ссылки, изображение исчезает. Обратите внимание, что изображения накладываются поверх контента, благодаря чему не происходит никаких сдвигов и рывков. Если же кому-то нужно, чтобы изображение не накладывалось на контент, спросите в комментариях — обязательно отвечу.
Результат: Наведите курсор мыши на ссылку.
Код JavaScript (вставлять между тегами <head> и </head>):
<script language = "JavaScript">
function showLinkImage(id) {
document.getElementById(id).style.display = "block";
}
function hideLinkImage(id) {
document.getElementById(id).style.display = "none";
}
</script>Код HTML (вставлять между тегами <body> и </body>):
<table align="center">
<tr>
<td align="center" valign="top">
<a href="#">Моя бабушка (82 года)</a>
<div>
<img src="foto5.jpg" alt="Фото 1" />
</div>
</td>
<td align="center" valign="top">
<a href="#">Мой дядя</a>
<div>
<img src="foto6.jpg" alt="Фото 2" />
</div>
</td>
</tr>
</table>- Создано 16.09.2011 19:48:28
- Михаил Русаков
Изображение материала при наведении на ссылку
Ссылки сами по себе скучная и непривлекательная штука, согласитесь? А бывает так, что нам нужно что-бы пользователь заинтересовался и перешел по ней. По этому, нам нужно как-то приукрасить привычное понимание ссылок. И сегодня мы сделаем это с помощью вывода изображения, которое будет появляться при наведении на ссылку.Данный скрипт работает на чистом CSS, и никаких танцев с бубном при настройке не требует. По этому проблем возникнуть не должно.
И так, приступаем к установке.
Первым делом мы добавляем стили в «Таблицу стилей (CSS)»:
Следующее, что мы добавляем — наша ссылка:Код
.thumbnail{
position: absolute;
position: relative;
z-index: 50;
}
.thumbnail:hover{
background-color: transparent;
z-index: 150;
}
.thumbnail span{
background-color: #0064af;
padding: 2px;
left: 10px;
border: 0px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 15px;
}
Вот и все, скрипт установлен.Код
<a href="$ENTRY_URL$">$TITLE$<span><img src="$IMG_URL1$" height ="200"/></span></a>
Данное решения является очень удобным, так, как работает без использовании JavaScrip, что тем самым снижает нагрузку на сайт. Настройка внешнего отображения всплывающей картинки осуществляется в таблице стилей.
Советую использовать этот скрипт в текстовых информерах популярных новостей и материалов, где при наведении на сам материал, будет показываться его изображение. Но я думаю вы и сами найдете ему применение.