1. Главная
  2. Статьи
  3. Вопрос-Ответ
  4. Новости
  5. Форум
  6. Вики
Вход   Регистрация

Биржа комментариев

СМС рассылки

Партнерские программы

Бесплатное продвижение сайтов

VPS хостинг

Кабель оптом

Качественный контент

Офисная мебель Проспект

Всплывающие при наведении изображения с помощью CSS

Очень часто на многих сайтах требуется выводить фотографии, слайды и так далее. Изображения выводятся сначала списком миниатюр, при клике на которые, пользователь может посмотреть увеличенную копию. Но было бы интересно сделать так, чтобы увеличенная копия изображения показывалась пользователю при наведении мышки на миниатюру. Существует достаточно большое количество решений с использованием JavaScript, которые реализуют этот функционал. Попробуем сделать то же самое, но только с использованием CSS.

Для создания такого эффекта создадим слой-контейнер pic в который поместим ссылку, а в нее
два изображения — маленькое и большое.

HTML код:

<div id="pic">
<a class="p1" href="#" title="Маленькая картинка">
<img src="smallimage.jpg" alt="Маленькая картинка" width="120" height="90" />
<img src="bigimage.jpg" alt="Большая картинка" width="400" height="300" class="large" />
</a>
</div>
Таблица стилей

Смотрите комментарии напртив каждой строки

 /* Описание котейнера для изображений */
#pic{ background-color: #FFFFFF; position: relative; /* Положение выставлено как relative. Это необходимо для того, чтобы потом абсолютно (absolute)спозиционировать большу картинку относительно левого верхнего угла слоя */ left: 10px; top: 10px; width: 120px; /* Ширина слоя = ширине миниатюры */ }
/* Описание стиля большой картинки */
/* Идея в том, что изображение сначала имеет размеры 1х1 и смещено за пределы видимости слоя. */
#pic a .large { border: 0px; display: block; height: 1px; left: -1px; position: absolute; top: -1px; width: 1px; }

#pic a img { border: 0; }

/* Выставляем стиль для ссылки, которая обрамляет изображения */
#pic a.p1, #pic a.p1:visited { background: #FFFFFF; border: 1px solid #000000; display: block; height: 90px; left: 0; text-decoration: none; top: 0; width: auto; }

/* Стиль для ссылки при наведении на нее мышкой */
#pic a.p1:hover { background-color: #FFF; color: #000000; text-decoration: none; }

/* Стиль для большого изображения при наведении мышки на миниатюру */
#pic a.p1:hover .large { border: 1px solid #000000; display: block; position: absolute; /* Абослютное позиционирование относительно слоя-контейнера */ top: -105px; /* Покажем большю картинку справа */ left: 130px; /* по центру от миниатюры */ width: 400px; /* Выставим нужные размеры большой */ height: auto; /* картинки, потому что она была 1х1 */ }

А вот, что получается: (наведите мышкой на маленькое изображение):

Маленькая картинка Большая картинка
Категория статьи: Веб-дизайн | Просмотров: 2183 | Добавлена: 25.08.2013

Почему Вы еще не прокомментировали?
Оставьте свой комментарий! Весь Интернет уже заждался!

Ваше Имя Муж. Жен. Как Вас величать?
Антиспам защита

– Напишите название этого сайта по-русски
(если Вы не в курсе, сайт называется "РапидАп")

Текст комментария
 
О сайте ⋅  Контакты