vk
" uCoz - это не просто бесплатный хостинг и CMS, но и средство заработка! "

Сайт-помощник по uCoz [ Beta ]

Данный раздел находится в разработке!
Поэтому может не корректно отображатся и функционировать!

Увеличение изображения при наведении курсора

Описание: Данная методика позволяет организовать вывод миниатюр на странице, которые при наведении курсора мыши будут увеличиваться до оригинального размера. Только одно изображение нужно для работы метода. Код CSS избавляет вас от рутинной работы по подготовке миниатюр. Также возможно сделать текстовую подпись под большим изображением.

Установка:

1. CSS : Ниже приведенный код стилей, нужно добавить в таблицу стилей CSS вашего сайта :

Код
/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo">  
Иначе увеличительне будет работать в IE6 */

.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;
}

/* Код увеличителя закончен */


2. HTML : Ниже приведенный код нужно добавить в желаемое место, где будут выводиться картинки. Ссылки, картинки, описание и название замените на свои. :

Код
<div class="ienlarger"><a  
href="Ваша ссылка перехода при нажатие на картинку 1"><img  
src="Ссылка на вашу картинку 1 мини" alt="thumb"  
class="resize_thumb" /><span>
  <img src="Ссылка на вашу картинку 1 в полный размер"  
alt="large" /><br />
  Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a  
href="Ваша ссылка перехода при нажатие на картинку 2"><img  
src="Ссылка на вашу картинку 2 мини" alt="thumb"  
class="resize_thumb" /><span>
  <img src="Ссылка на вашу картинку 2 в полный размер"  
alt="large" /><br />
  Текст можно написать здесь.</span></a></div>  
Автор публикации: WooFi   Повысить репутацию WooFi за эот материал
Источник: Смотреть | Дата публикации: 30.01.2013 | Просомтров: 4890
$ Помощь по установке и настройке $

Платная помощь по uCoz

Комментарии ↓


rm">
avatar