ZorNet.Ru — сайт для вебмастера » Ajax модальное окно » Скрипт всплывающая картинка при наведении на картинку
Скрипт всплывающая картинка при наведении на картинку
 | |
| Можно этот стиль применять как в модулях так и на форуме. Вот к примеру вы написали статью вам не нужно кликать на картинку а просто навести на ее курсор и она будит полной, размер такой же который вы заливали на сайт. Все это делается при помощи 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 class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a> Так же есть еще второй вариант кода. CSS не трогать просто другой код можно сделать чтобы при наведении на картинку появлялась еще картинка например увеличенная очень красиво получается. Код <a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a> Как сделать чтобы установить для всех фото чтобы не ставить на каждую? Смотря для какого модуля Вам нужно, допустим для модуля ФОТОАЛЬБОМ будет так: Код <?if($FULL_PHOTO_DIRECT_URL$)?><a class="thumbnail" href="#"><img src="$FULL_PHOTO_DIRECT_URL$" width="100px" border="0" /><span><img src="$FULL_PHOTO_DIRECT_URL$" width="500px" border="0" />$PHOTO_NAME$</span></a><?endif?> Размеры выставляйте те, которые Вам нужны. А можно ли сделать 2 всплывающих картинки, одна под другой? Да, можно Код <a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок 1" /><img src="ссылка на рисунок 2" />Ваш текст</span></a> Источник: megascripts.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
