Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Увеличение фото при наведении
Увеличение фото при наведении
Kosten
Дата: Четверг, 19.04.2012, 10:26 | Сообщение # 1
Администраторы
Сообщений:12675
Награды: 39


Этот код вставляем в нижнюю часть сайта

Code
<style
  type="text/css">

.ienlarger {
     float: left;
     clear: none; /* Можно установить left или right по необходимости */
     padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
     padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a {  
     display:block;
     text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}

.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
      position:relative;
}

.ienlarger span img {
     border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
     margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}

.ienlarger a span {  /* Для большого изображения и названия */
     position: absolute;
     display:none;
     color: #FFCC00; /* Текст названия */
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px; /* Размер шрифта названия */
     background-color: #000000;
     font-weight: bold;
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 13px;
     padding-left: 10px;
}

.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}

.ienlarger a:hover span {  
     display:block;
     top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
     left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
     z-index: 100;
      
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}

.resize_thumb {
     width: 150px; /* Вводим нужный размер миниатюры здесь */
     height : auto;
}

</style>


Этот код вставляете там где хотите видеть
Этот код с подписью внизу


Code
<div align="center"><div class="ienlarger"><a  
href="Здесь адрес картинки,или другой адрес(например сайта)"><img  
src="Здесь адрес картинки" alt="thumb"  
class="resize_thumb" /><span>
     <img src="Здесь адрес той же картинки"  
alt="large" />
Здесь пишите текст</span></a></div></div>


А этот код без подписи

Code
<div align="center"><div class="ienlarger"><a  
href="Здесь адрес картинки,или другой адрес(например сайта)"><img  
src="Здесь адрес картинки" alt="thumb"  
class="resize_thumb" /><span>
     <img src="Здесь адрес той же картинки"  
alt="large" />
</span></a></div></div>


frecsarg
Дата: Пятница, 26.02.2016, 18:53 | Сообщение # 2
Пользователи
Сообщений:13
Награды: 0


Видел такую фишку, не очень понравилось.
Kosten
Дата: Суббота, 27.02.2016, 04:42 | Сообщение # 3
Администраторы
Сообщений:12675
Награды: 39


frecsarg, но кому как, где то нормально смотрится и кому то не нравиться, все на любителя.

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Увеличение фото при наведении
Страница 1 из 11
Поиск: