Создание анимационных кнопок

При создании дизайна сайта систему навигации (гиперссылки) часто выполняют в виде графических анимационных кнопок (меняющихся кнопок). Иногда их называют «ролловерами» (англ. rollover).

Для создания одной графической анимационной кнопки используют три рисунка.

Пример 1.

Пример 2.

В нашей работе мы создадим анимационные кнопки На главную, Заказ проекта, Контакты, которые имеют два состояния: исходное (рис. 23, а) и при наведении курсора мыши (рис. 23, б)

а б

Рис. 23.

Каждая кнопка расположена в ячейке таблицы (таблица из одной строки с тремя ячейками). Фоном каждой ячейки является изображение, которое меняется при наведении курсора мыши и получается эффект анимационной кнопки. Надписи занесены в ячейку таблицы (а не написаны на изображении) и имеют внешнюю стилевую спецификацию.

Таким образом, для создания анимационных кнопок (см. рис. 23) Вам предстоит создать два внешних стиля:

· Внешний стиль для текстовых гиперссылок На главную, Заказ проекта, Контакты (это Вы уже умеете делать);

· Внешний стиль для ячейки таблицы, в которой расположена каждая гиперссылка (как это делается, Вы сейчас узнаете).

Каждая ячейка таблицы имеет HTML-код, представленный ниже. Разберем его структуру.

· width=95 height=20 – высота и ширина ячейки в пикселях означает, что изображение, которое будет фоном ячейки должно иметь такие же размеры.

· class=menu1 – имя стиля ячейки таблицы во внешней стилевой спецификации. Стиль menu1 применяется к ячейке в исходном состоянии гиперссылки.

· onmouseover="this.className='menuover2'" – при наведении курсора мыши к ячейке применяется стиль menuover2 из внешней таблицы стилей.

· onmouseout="this.className='menu1'" – когда курсор мыши уходит с гиперссылки, к ячейке применяется стиль menu1 из внешней таблицы стилей.

· <a class="zakaz" href="main.html" title="На главную" target="main">На главную</a> – к текстовой гиперссылке применяется стиль zakaz из внешней таблицы стилей, title="На главную" означает, что при наведении курсора на гиперссылку появится всплывающая подсказка «На главную».

Таким образом, для создания анимационных гиперссылок необходимо создать:

1. Два изображения размером 95*20 пикселей. Одно изображение будет соответствовать исходному состоянию гиперссылки, а второе – при наведении курсора мыши.

2. Стиль menu1 для ячейки таблицы, фоном которой будет изображение для исходного состояния гиперссылки.

3. Стиль menuover2 для ячейки таблицы, фоном которой будет изображение при наведении курсора мыши.

4. Стиль zakaz для текстовой гиперссылки.

Дата добавления: 2015-07-24