Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 15. Создание активной картинки
Не нравится(-) 21 Нравится(+)
27-06-2008, 01:48 - GZ Design (Уроки CSS)
Урок CSS 15. Создание активной картинки

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

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

/*
=============================================================
© 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;  /* Задание высоты увеличенного изображения */
}


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
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 7,5 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 18885 раз(а) и написали 9 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!