Изображения-карты

HTML позволяет превратить в гиперссылку часть графического изображения. Более того, мы можем разбить изображение на части, каждая из которых будет представлять собой гиперссылку, указывающую на свой интернет-адрес. Такие изображения называют изображениями-картами, а ее части-гиперссылки — "горячими" областями.

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

Изображение-карту создают в три этапа. Первый этап — создание самого изображения с помощью тега <IMG>:

<IMG SRC="map.gif">

Второй этап — создание карты, особого элемента Web-страницы, который описывает набор "горячих" областей изображения-карты. Сама карта на Web-странице никак не отображается.

Карту создают с помощью парного тега <MAP>:

<MAP NAME="<имя карты>">

</MAP>

С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web-страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:

<MAP NAME="samplemap">

</MAP>

После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут 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).

Листинг 5.2 содержит полный HTML-код, создающий изображение-карту.