» »

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


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

Можно этот стиль применять как в модулях так и на форуме. Вот к примеру вы написали статью вам не нужно кликать на картинку а просто навести на ее курсор и она будит полной, размер такой же который вы заливали на сайт. Все это делается при помощи 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
20.05.2013 Просмотров: 1553 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 07.06.2016 15:131
0
Можно в низ или файлом сделать специально под него.
avatar