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

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

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

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

<IMG SRC="map.gif">

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

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

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

ВНИМАНИЕ!

Здесь для описания формата тега <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.)

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

<IMG SRC="map.gif" USEMAP="#samplemap">