В качестве ссылок в HTML может использоваться изображение. Для этого тег IMG должен быть помещен внутрь тега А. Например, <A HREF=”kino.htm” TARGET=”_blank”> <IMG SRC=”poster.jpg”> </A>

В этом примере изображение poster.jpg является ссылкой на страницу kino.htm. В окне браузера такое изображение заключено в рамку, цвет которой совпадает с цветом оформления ссылок.  По умолчанию цвет непосещенной ссылки – синий, а посещенной ссылки – фиолетовый. Такая рамка позволяет отличать изображение-ссылку от других изображений страницы.

Особенностью использования изображений в качестве ссылок является возможность назначать ссылкой не всё изображение, а только ее часть. В этом случае курсор мыши при перемещении по площади такого изображения меняет свой облик при пересечении области, назначенной в качестве ссылки. Более того, одна изображение может адресовать сразу несколько ссылок.

Такой способ назначения ссылок называется НАВИГАЦИОННОЙ КАРТОЙ. Ее особенностью является наложение одной или нескольких прямоугольных, круглых или многоугольных областей на иллюстрацию, размещенную на странице, причем каждой области сопоставляется ссылка, адресующая переход к другой странице текущего или внешнего сайта.

Для оформления ссылок в виде навигационной карты используются теги:

1)   Структурный парный тег <MAP>, внутри которого может находиться несколько непарных тегов <AREA> (по количеству назначаемых ссылок, задающий структуру навигационной карты для изображеники

2)   Тег <IMG>, в котором подключена карта, объявленная в теге <MAP>, как значение атрибута usemap.

Пример

<img src=”bluerects.gif” usemap=”#chart” >

<map name=”chart“>

<area href=”exm1-1.htm” target=”_blank” shape=”rect” coords=”25,36,114,98″>

<area href=”exm1-2.htm” target=”_blank” shape=”rect” coords=”153,11,219,126″>

</map>

В приведенном примере для рисунка bluerects.gif назначена навигационная карта chart, включающая в себя 2 прямоугольные области (shape=”rect”). Таким образом, рисунок одновременно адресует две разных ссылки – на страницы exm1-1.htm и exm1-2.htm. Сам рисунок содержит два прямоугольника с названными координатами, закрашенные в синий цвет.

Тег <MAP> используется для создания навигационной карты изображения. Тег является парным и содержит внутри себя теги <AREA>, определяющие области навигационной карты.

Стандартный атрибут:

• name = «карта» – Обязательный атрибут. Задает имя карты изображений.

Дополнительные атрибуты:

• title= «текст» – всплывающая подсказка при наведении курсора мыши на ссылку.
• id=«метка» – имя метки для последующего перехода по ссылке

Тег <AREA> определяет область навигационной карты.

Стандартные атрибуты:

• alt = «Текст» – Обязательный атрибут. Альтернативный текст для браузеров, которые не могут отобразить изображение.
• shape – Задает тип формы области.
• coords – Задает координаты области.

• href =«адрес» – Задает путь к документу, который связан с конкретной областью.
• target – Задает имя окна или фрейма, в котором будет открыт документ.
• nohref – Указывает, что область не имеет ссылки на документ.

Чтобы назначить навигационную карту для изображения нужно:

1)   Открыть в программе Paint исходное изображение.

2)   Нарисовать поверх изображения прямоугольную, многоугольную и круговую рамку вокруг тех областей изображения, которые будут задействованы в качестве ссылок.

3)   Записать координаты каждого угла многоугольника или верхнего левого и нижнего правого угла прямоугольника, а для нарисованного круга определить координаты центра и радиус.

4)   Выйти из программы Paint БЕЗ СОХРАНЕНИЯ (чтобы не испортить исходный рисунок).

5)   Использовать записанные координаты при оформлении тегов <AREA>.

6)   При оформлении тега изображения объявить имя карты, заданное тегом <MAP>, в качестве значения параметра USEMAP, перед именем указать #.

Если в одной навигационной карте несколько областей пересекаются, то в этом случае для области пересечения будет задействована ссылка на адрес первого из тегов <AREA> в порядке следования, чьи области пересекаются на карте