Навигационные области

Иногда возникает задача сделать гиперссылками не всю картинку, а различные участки ее. Причем гиперссылками являются не прямоугольные области, как в случае с одним изображением, а многоугольники. Для решения такой задачи в языке HTML имеются навигационные области. Работает это следующим образом. Вы определяете навигационную карту областей с гиперссылками и привязываете ее к рисунку. Вот пример:


<img src=images/head.jpg usemap=#Map border=0><map 
name=Map><area shape=rect coords="1,109,59,123" 
href=/about/><area shape=rect coords="58,110,154,124" 
href=/library/><area shape=rect coords="154,110,235,124" 
href=/download/><area shape=rect coords="235,110,301,124" 
href=/links/><area shape=rect coords="301,110,385,124" 
href=/map/><area shape=poly coords="590,109,696,109,696,90,656,89,633,77" 
href=/forum/><area shape=poly coords="654,37,696,37,696,81,653,82,636,72" 
href=/guestbook/><area shape=poly coords="652,2,655,36,698,35,697,2" 
href=mailto:olimp@itsoft.ru><area shape=rect coords="75,12,502,74"
href=/></map>

При помощи атрибута usemap команды <img> к изображению цепляется навигационная карта. Сама карта определяется двумя командами: <map> и <area>1;. Команда <map> имеет один единственный атрибут name, который задает название карты. В данном примере карта имеет имя Map, которое также присваивается атрибуту usemap команды <img>. Команда <map> имеет закрывающую часть - </map>. Сами навигационные области определяются при помощи команды <area>. Эта команда имеет следующие атрибуты:

href

определяет URL гиперсвязи

shape

область, одно из следующих значений

default - вся область
rect - прямоугольник
circle - окружность
poly - многоугольник

coords

координаты, задающие соответствующую область

rect: left-x, top-y, right-x, bottom-y, т.е. левый верхний угол и правый нижний
circle: center-x, center-y, radius.
poly: x1, y1, x2, y2, ..., xN, yN.

nohref

мертвая зона

alt

всплывающая подсказка

Здесь необходимо отметить, что для создания карт навигационных областей уместно прменять WYSIWYG-редакторы, которые значительно упрощают и ускоряют разметку навигационных областей. В качестве такого редактора можно использовать, например, Macromedia Dreamweaver 4. Но сгенерированный HTML-код все равно потребует доведения его до ума вручную.

Упражнение

Для вышеприведенного изображения и навигационной карты добавить прямоугольную область для заголовка "ОЛИМПИАДА". Ссылку поставить на сайт http://olimp.itsoft.ru.