Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ - самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим... 1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
<TABLE style="border-collapse:collapse;width:100%;"><TBODY><TR><TD style="border:#000000 1px solid">/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок 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; /* Задание высоты увеличенного изображения */
}
</TD></TR></TBODY></TABLE>
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
</P>
<TABLE style="border-collapse:collapse;width:100%;"><TBODY><TR><TD style="border:#000000 1px solid"><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>
</TD></TR></TBODY></TABLE></P>
4) Сохраняем и смотрим, что получилось.
Вот и всё... Метод действительно очень прост, но не совершенен. В одном из следующих уроков, я опишу более сложный и эффективный метод увеличения изображений.
Совместимость: Internet Explorer 7; Mozilla Firefox 2.xx; Opera 7.хх - 9.xx
</P>
