Составление навигационной карты путем помещения фрагментов изображения в таблицу
Навигационные карты — отличный способ помочь посетителям лучше ориен-тироваться в пределах вашего сайта. Навигационная карта похожа на группу кнопок, объединенных в одно изображение. Когда посетитель сайта наводит курсор мыши на навигационную карту, внутренний код навигационной карты позволяет ему щелкать мышью на определенных областях карты, так называемых "горячих"областях. "Горячие" области — это невидимые границы вокруг определенных частей изображения. Например, на навигационной карте Соединенных Штатов "горячие" области определяли бы границы каждого штата. Когда посетитель щелкает на штате Канзас, "горячая" область, определяющая Канзас, может, например, загрузить Web-страницу с текущими погодными условиями в Канзасе, или же может направить посетителя на Web-сайт, посвященный, скажем, истории Канзаса. Навигационные карты помогают посетителям наглядно ориентироваться в пределах сложного Web-сайта.
Проблема, связанная с навигационными картами, заключается в том, что писать код для них достаточно сложно и что не все версии Web-браузеров поддерживают навигационные карты. Преодолеть эту проблему и добиться свойственной навигационным картам гибкости можно с помощью механизма таблиц. Чтобы ячейки таблицы функционировали как "горячие" области на навигационной карте, разделите изображение на прямоугольные фрагменты и поместите каждый фрагмент в отдельную ячейку таблицы. Затем добавьте в каждую ячейку дескриптор <а> с атрибутом href, который будет сообщать Web-браузеру, какое действие необходимо выполнить при щелчке на изображении, помещенном в ячейку.
ПРАКТИКУМ
В приведенном ниже коде, когда посетитель выполняет щелчок на графическом изображении home.jpg, Web-браузер соединяется с Web-страницей home.htm и открывает ее:
<а href="home.htm"> <img height="20" width="80" src="home.gif"></a>
Правильно разработанные и помещенные в ячейки таблицы с границами нулевой ширины (то есть невидимыми) фрагменты рисунка Web-браузер отображает рядом друг с другом, так что посетитель будет видеть их как целостное графическое изображение.
Приведенный ниже код создает навигационную панель, показанную на рис. 2.25:
<table border="0' cellpadding="0" cellspasing="0"><tr height="20"><td width="140"><a href="search.htm"><img src="search_btn_on.jpg" height="20" width="140"></a></td><td width="140"><a href="how2use.htm"><img src="how2use_btn_on.jpg" height="20" width="140"></a></td><td width="140"><a href="refs.htm"><img src="refs_btn_on.jpg" height="20" width="140"></a></td><td width="140"><a href="coords .htm"><img src="coords_btn_on.jpg" height="20" width="140"></a></td><td width="140"><a href="guestbook.htm"><img src="guestbook_btn_on.jpg" height="20" width="140"></a></td></tr></table>
Рис. 2.25. Таблица с пятью графическими изображениями, которые на Web-странице выглядят как единое целое