Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Увеличение изображения с помощью overflow. Это свойство влияет на отображение содержимого, в случае если это содержимое превышает размеры родительского контейнера.




ПОИСК по сайту


    Полный список статей
/ overflow / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Этот пример покажет вам как можно реализовать простое увеличение изображений на вашей странице. Иногда на странице не хватает места для размещения полноразмерных изображений на странице и в тоже время не хочеться размещать маленькие, трудноразличимые картинки. Данный способ позволяет ограничить размер изображений, а при наведении указателя мыши показывать их в полном размере.

Введение

В основе этого способа лежит не фактическое изменение размера изображения, а изменение его видимой области, с помощью свойства overflow. Это свойство влияет на отображение содержимого, в случае если это содержимое превышает размеры родительского контейнера. Если контейнер имеет ограниченный размер, по той или иной причине, то используется это свойство чтобы определить, что произойдет. Свойство overflow может принимать следующие значения: visible, hidden, scroll и auto. В этом примере мы будем использовать значение hidden, чтобы скрыть часть изображения, и visible чтобы сделать эту часть видимой при наведении указателя мыши.

Концепция

Идея заключается в том, чтобы разместить изображение в определенном контейнере. Поскольку мы говорим об изображениях, то в роли такого контейнера будет выступать элемент . Делаем контейнер блочным, указываем необходимые размеры (ширина и высота) и устанавливаем относительное позиционирование. Изображение внутри контейнера имеет абсолютное позиционирование и отрицательные левый и верхний отступы.

Превьюшки на CSS

Код

Этот способ можно применять как для одного, так и для нескольких изображений.

‹a href="#"><img src="image.jpg"  alt="Мое изображение" /></a›

CSS свойства для определения позиции изображения выглядят примерно так:

a{
display:block;
float:left;
width:100px;
height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
a img{
position:absolute;
top:-20px;
left:-50px;
}

Если вы хотите использовать изображения разных размеров, вы можете указать отступы непосредственно для каждого изображения:

a img{
position:absolute;
top:-20px;
left:-50px;
}
a#image1 img{
top:-28px;
left:-55px;
}
a#image2 img{
top:-18px;
left:-48px;
}
a#image3 img{
top:-21px;
left:-30px;
}
.
.
.

И, наконец, прописываем свойства, чтобы изображение стало видимым при наведении мыши:

a:hover{
overflow:visible;
z-index:1000;
border:none;
}

Как вы заметили для обоих состояний контейнера используется свойство z-index. www.alexilin.ru/ispolzovanie-z-index/ Это важно, поскольку при наведении указателя нам нужно расположить изображение выше чем соседние изображения. В противном случае способ будет работать не корректно.

Пользуйтесь…

  • Мое изображение
  • Мое изображение
  • Мое изображение
  • Мое изображение

Оригинал: Create Resizing Thumbnails Using Overflow Property
cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property

скачать исходники http://cssglobe.com/lab/overflow_thumbs/overflow_thumbs.zip


Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0259 s.