Графические гиперссылки

Гиперссылки можно назначать не только фрагментам текста, но и любым графическим элементам. В редакторах Web-страниц графические гиперссылки создаются так же, как и текстовые. Достаточно выделить графический элемент на странице и выполнить стандартную процедуру создания гиперссылки (см. главу 2).

В приложении Word выделите графический элемент и выберите команду меню Вставка=>Гиперссылка. Откроется диалоговое окно Добавление гиперссылки, в котором следует выбрать файл или ввести URL-адрес ресурса в Интернет.

Графические гиперссылки позволяют совместить функции навигации с оформлением Web-страницы. В то же время преимущество текстовых гиперссылок состоит в том, что к ним автоматически применяется особый стиль форматирования, позволяющий легко отличить их в документе. К рисунку, которому назначена гиперссылка, также автоматически добавляется голубая рамка. Но это выделение может остаться незамеченным. Чтобы привлечь внимание посетителей страницы к графическим гиперссылкам, воспользуйтесь следующими приемами:

♦ разместите графические гиперссылки на панели ссылок;

♦ добавьте подпись к рисунку, разъясняющую его функцию;

♦ разработайте эффект анимации рисунка с гиперссылкой и добавьте экранную подсказку.

Подписи можно добавлять непосредственно в графическом редакторе при создании рисунка. В этом случае вы получите полный контроль над выравниванием подписи и ее размером относительно рисунка. Подпись можно добавить как обычный текст в редакторе Web-страниц. В главе 6 вы узнаете о способах выравнивания текста относительно рисунка. Перед созданием гиперссылки выделите рисунок вместе с подписью, чтобы назначить гиперссылку этим элементам страницы.

Чтобы воспользоваться последним советом, нужно познакомиться с атрибутом title(не путать с дескриптором <TITLE>)и написать небольшой сценарий обработки событий onMouseOverи onMouseOut.

Прежде всего создайте копию файла рисунка, которому вы хотите назначить гиперссылку. Например, для рисунка lable. jpgсоздайте копию lable_active.jpg.Откройте файл lable_active.jpgв графическом редакторе и добавьте рамку вокруг рисунка или эффект тени. Теперь нужно написать сценарий, который будет менять текущий рисунок на его «активную» копию при наведении указателя мыши и возвращать исходный рисунок после того, как пользователь сместит указатель на другой элемент страницы.

Наберите код HTML, показанный в листинге 5.8.