Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ - самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/*
=============================================================
© 2008 Урок CSS №15. Создание активной картинки
style.css - Набор стилей для урока
=============================================================
*/
/* Задание стилей для миниатюры */
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) Сохраняем и смотрим, что получилось.
Вот и всё... Метод действительно очень прост, но не совершенен.
| 
Главная