Урок CSS. Создание активной картинки


Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ — самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим!

1. Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.

2. Вставьте в этот файл следующий код (подробнее о командах — в коде):

/* Задание стилей для миниатюры */
a.st img {
     width:100px; /* Задание ширины миниатюры */
     height:75px; /* Задание высоты миниатюры */
     border:3px solid #c8c8c8; /* Задание декоративной границы */
}

/* Задание стилей для полного изображения */
a.st:hover img {
     position:relative; /* Задание позиции увеличенного изображения */
     top:-30px;  /* Задание отклонения увеличенного изображения вверх */
     width:200px;  /* Задание ширины увеличенного изображения */
     height:150px;  /* Задание высоты увеличенного изображения */
}


3. Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div align="center" >
<br />
<br />
<a class="st" href="#"><img src="1.png" alt="" title="" /></a> 
</div>
</body>
</html>

4. Сохраняем и смотрим, что получилось.

Совместимость: Internet Explorer 7; Mozilla Firefox 2.xx; Opera 7.хх — 9.xx

Источник — www.css-school.ru/
  • avatar
  • .
  • +8

1 комментарий

avatar
Одно неудобно — картинка расширяется и сдвигает содержимое рядом.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.