ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Появление картинка при наведении курсора для ucoz
Появление картинка при наведении курсора для ucoz
 | |
| Это оригинальный скрип для сайта ucoz, где вы можете работать с картинками. А это вам не нужно много места и все будет на стилях css. Представлю два кода, это надпись, на которую нужно курсор повернуть и откроется картинка, можете хоть что написать. И второй вариант, это как размер Avarat, но можно выставить как вам нужно, и дальше, все делается как в первом случай и вот он скрин в полном размере. Применение его можно разместить как в мануале, да вообщем много везде, просто нужно включить фантазию. В 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> 2 Код <a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a> Все делаем как написано. Позаимствовал на сайте: Megascripts.ru Смотрим: DEMO | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
