После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение — имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ("решетка"). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)
<IMG SRC="map.gif" USEMAP="#samplemap">
На третьем этапе создают описания самих "горячих" областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов
<AREA>:
<AREA [SHAPE="rect|circle|poly"] COORDS="<набор параметров>" HREF="<интернет-адрес гиперссылки>"|NOHREF TARGET="<цель гиперссылки>">
Необязательный атрибут SHAPE задает форму "горячей" области. Обязательный атрибут COORDS перечисляет координаты, необходимые для построения этой области. Значения атрибута SHAPE:
— "rect" — прямоугольная "горячая" область. Атрибут COORDS в этом случае записывается в виде COORDS="<X1>,<Y1>,<X2>,<Y2>", где X1 и Y1 — координаты верхнего левого, а X2 и Y2 — правого нижнего угла прямоугольника. Кстати, если атрибут SHAPE отсутствует, создается именно прямоугольная область;
— "circle" — круглая "горячая" область. В этом случае атрибут COORDS имеет вид COORDS="<X центра>,<Y центра>,<радиус>";
— "poly" — "горячая" область в виде многоугольника. Атрибут COORDS должен иметь вид COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>…", где Xn и Yn — координаты соответствующей вершины многоугольника.
Атрибут HREF задает интернет-адрес гиперссылки — он, собственно, нам уже знаком. Он может быть заменен атрибутом без значения NOHREF, задающим область, не связанную ни с каким интернет-адресом. Это позволяет создавать оригинальные изображения-карты, например, карту в виде бублика, "дырка" которого никуда не указывает.
Также знакомый нам атрибут TARGET задает цель гиперссылки. (Конечно, указывать его имеет смысл только в том случае, если мы создаем именно "горячую" область, а не "дырку" с атрибутом NOHREF.)
Листинг 6.2 содержит полный HTML-код, создающий изображение-карту.
<IMG SRC="map.gif" USEMAP="#samplemap">
Листинг 6.2
.
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>
<AREA SHAPE="rect" COORDS="0,100,30,100" HREF="appendix.html" TARGET="_blank">
</MAP>
Здесь мы создали две круглые "горячие" области, указывающие на Web-страницы page1.html и page2.html, многоугольную область, не ссылающуюся никуда, и прямоугольную область, ссылающуюся на Web-страницу appendix.html. Причем последняя "горячая" область при щелчке на ней откроет Web-страницу в новом окне Web-обозревателя.
Вот и все об изображениях-картах и о графических гиперссылках вообще.
Полоса навигации
Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.
Полоса навигации может быть расположена по горизонтали, вверху или внизу Web- страницы, или по вертикали, слева или справа. Горизонтальную полосу навигации можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным числом ячеек (каждая гиперссылка располагается в своей ячейке таблицы). Вертикальную полосу навигации обычно формируют с помощью таблицы из одного столбца и нужного числа ячеек (опять же, каждая гиперссылка располагается в своей ячейке таблицы), набора абзацев (каждая гиперссылка представляет собой отдельный абзац) или в виде списка (гиперссылки представляют собой пункты этого списка).
Гиперссылки полосы навигации могут быть текстовыми или графическими. В последнем случае практически всегда применяют изображения-гиперссылки. Зачастую для изображений-гиперссылок реализуют особое поведение, заменяющее изображение другим при наведении на соответствующую гиперссылку курсора мыши. (О поведении Web-страницы мы поговорим в части III.)
Полосу гиперссылок всегда выделяют, чтобы привлечь к ней внимание посетителя. Ее могут выделить цветом текста и фона, рамкой, увеличенным размером шрифта или всем вместе. Все это реализуется с помощью задания соответствующего представления Web-страницы.
Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализуем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 6.3).