www.romver.ru
/ Раздел Статьи / overflow

Как заказать сайт



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

Введение

В основе этого способа лежит не фактическое изменение размера изображения, а изменение его видимой области, с помощью свойства 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(981) 760-8865

e-mail: w e b m a s t e r @ r o m v e r . r u
icq 3681771  © 1997 - 2024 romver.ru