Google-Translate Войти на сайт
 
МЕНЮ САЙТА
РАЗДЕЛЫ
Уроки Ucoz [13]
Уроки Borda.ru [13]
Уроки Photoshop [32]
Уроки Adobe Illustrator [1]
Уроки HTML и CSS [13]
JAVA-Скрипты [15]
Веб-дизайн [17]
Создание и продвижение сайта [92]
Интересные статьи [194]
ВЕЛОЛЮБИТЕЛЯМ!
Ярмарка Мастеров - ручная работа, handmade
КОНТАКТЫ
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru
Мы Вконтакте
НАШИ ДРУЗЬЯ
Быстрая и недорогая раскрутка сайта
Регистрация в каталогах
Сибирский рубеж - автоэмали оптом и в розницу. Подбор автоэмалей PROFIX.
Хорошие новости о животных
WOlist.ru - каталог качественных сайтов Рунета
FONWEB.RU - Веб-дизайн
Интересные статьи
Клипарт на прозрачной основе


ЗАРЕГИСТРИРОВАТЬ СВОЙ САЙТ
СТАТИСТИКА
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная | Полезные статьи
Главная » Статьи » Уроки HTML и CSS

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

Посмотреть как работает:


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

<style
 type="text/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;
}

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

</style>

HTML:

  <div class="ienlarger"><a
href="http://ruseller.com"><img
src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb"
class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg"
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a
href="http://www.google.co.uk/"><img
src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb"
class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg"
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a
href="http://www.facebook.com/"><img
src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb"
class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg"
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img
src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb"
class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg"
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

    <br style="clear:left" />
Категория: Уроки HTML и CSS | Добавил: Белая_Кошка (23.05.2014)
Просмотров: 2996 | Теги: увеличение картинки CSS, увеличение картинки при наведении | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Веб-студия "К-Дизайн" © 2009-2017
Контакты
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru

Счетчики
Яндекс цитирования
Работа
Создание сайтов и форумов
Порядок работы с заказами
Порядок оплаты заказов
Бонусы
Бесплатные кнопки для форумов
Бесплатные дизайны для форумов
Готовые шаблоны для сайтов
Уроки фотошоп
Уроки CMS Ucoz