Графические вкладки
Автор статьи: Влад Мержевич ©
Сайт Автора: htmlbook.ru
E-mail Автора: Нет
Дата публикации: 13.07.2005
Вкладки представляют собой список команд для организации вариантов выбора. Использование графических изображений для создания вкладок привлекает внимание посетителей сайта и формирует его эстетическую привлекательность.

Для создания вкладок вначале потребуется два рисунка, их можно подготовить в любом подходящем графическом редакторе. Первый рисунок (рис. 1) служит для обозначения неактивного пункта, а второй (рис. 2) заменяет его при наведении на пункт курсора мыши. Рисунки должны быть одинаковы по размеру.


Рис. 1. Изображение для создания вкладки


Рис. 2. Изображение, которое будет появляться при наведении на вкладку курсора

Подобный прием, когда один рисунок меняется на другой при наведении на него курсора мыши, называется «эффект перекатывания» или rollover.

Вначале создаем основу для вкладок (пример 1).
Пример 1. Стиль для слоя menu
#menu {
height: 40px; /* Высота вкладки */
padding: 0px 20px; /* Поля вокруг текста по вертикали и горизонтали */
border-bottom: 4px solid black; /* Линия под вкладками */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание */
font-size: 14px /* Размер шрифта */
}

Высота слоя, задаваемого параметром height должна равняться высоте наших рисунок, в данном случае она составляет 40 пикселов. Отступы управляются аргументом padding, а высота и цвет линии снизу атрибутом border-bottom. Поскольку ширина и высота всех рисунков задана заранее, то размер текста меняться не должен, иначе может получиться, что он выйдет за пределы рисунка. Увеличить или уменьшить шрифт можно через настройки браузеров. Чтобы этого не произошло, требуется жестко задать размер шрифта в абсолютных единицах, например, пикселах, через параметр font-size.

Теперь перейдем к отдельным пунктам вкладок. Чтобы не загромождать стиль разными именами, воспользуемся контекстными селекторами. Конструкция #menu DIV означает, что стиль будет работать только для тега DIV, который размещается внутри слоя с именем menu. Осталось для него только сделать описание (пример 2).
Пример 2. Стиль для отдельных пунктов
#menu DIV {
float: left; /* Совмещаем вкладки по горизонтали */
width: 151px; /* Ширина вкладки */
height: 40px; /* Высота вкладки */
margin-right: 10px; /* Отступ слева */
text-align: center; /* Выравнивание текста по центру */
background: url(m1.jpg) no-repeat /* Путь к первому рисунку */
}

Параметр float предназначен для размещения слоев по горизонтали, без него, по умолчанию слои располагаются друг под другом. Обязательно надо установить ширину (width) и высоту (height) слоя равную размерам рисунка. Аргумент margin-right управляет расстоянием между вкладками, а background определяет путь к файлу с изображением, он может быть как абсолютным, вроде http://www.htmlbook.ru/images/m1.jpg, так и относительным, как указано в примере.

Осталось только описать ссылки. Также воспользуемся контекстными селекторами и создадим стиль для элемента #menu A, который будет действовать только для ссылок в слое menu (пример 3). Это позволяет использовать в дальнейшем на сайте тег A, уже не заботясь о том, что он где-то описан.
Пример 3. Описание стиля ссылок
#menu A {
width: 100%; /* Ссылка на всю ширину вкладки */
height: 100%; /* Ссылка на всю высоту вкладки */
padding: 12px 0px /* Поля для размещения текста по центру */
}

#menu A:hover {
background: url(m2.jpg) no-repeat /* Путь ко второму рисунку */
}

Параметр padding отвечает за сдвиг текста внутри слоя, чтобы надпись располагалась приблизительно по центру рисунка. Высота и ширина установленная как 100% требуется, чтобы ссылкой работала вся область рисунка, а не только текстовая ссылка. Если убрать эти параметры, то эффект перекатывания возникнет лишь при наведении курсора на надпись.

Смена одной картинки на другую осуществляется через псевдокласс A:hover. Он отвечает за событие, возникающее при наведении курсора мыши на ссылку. Тогда происходит замена фонового изображения на другое через параметр background.

Окончательный код со всеми стилями приведен в примере 4
Пример 4. Окончательный код для создания вкладок
<html>
<head>
<style type="text/css">
#menu {
height: 40px;
padding: 0px 20px;
border-bottom: 4px solid black;
font-family: Arial;
font-weight: bold;
font-size: 14px
}

#menu DIV {
float: left;
width: 151px;
height: 40px;
margin-right: 10px;
text-align: center;
background: url(m1.jpg) no-repeat
}

#menu A {
width: 100%;
height: 100%;
padding: 12px 0px

}

#menu A:hover {
background: url(m2.jpg) no-repeat
}

</style>
</head>

<body>
<div id=menu>
<div><a href=#>Чебурашка</a></div>
<div><a href=#>Крокодил Гена</a></div>
<div><a href=#>Шапокляк</a></div>
</div>
</body>
</html>

Приведенный способ создания вкладок имеет как свои достоинства, так и недостатки. К преимуществам относится простота и быстрота построения вкладок. Среди недостатков — меню не работает в браузере Opera 6, а также медленная скорость работы. Это связано с тем, что загрузка в память второго рисунка происходит не заранее, а только по мере обращения к нему. Соответственно замедляется и смена одной картинки на другую. Этого можно избежать, если понизить объем файлов изображений или осуществить предварительную загрузку картинок в память с помощью JavaScript. Еще один способ ускорения работы меню связан с объединением рисунков в одну картинку и сдвигом фонового рисунка. Но это уже проделайте самостоятельно. Свои варианты присылайте мне на почтовый ящик, адрес вы знаете.

Список похожих статей