Сегментированная графика. Элементы <MAP> и <AREA>.

Сегментированная графика или графическая карта (imagemap) представляется обычным изображением с выделенными чувствительными (активными) областями. Активные области изображения являются ссылками на адресуемые элементы гипертекста.

Графическая карта может быть создана в любом графическом редакторе, который позволяет сохранять изображения в формате GIF, JPG (JPEG) или PNG. Алгоритм создания графической карты:

- выбирается или рисуется изображение, которое сохраняется в виде файла с расширением gif, jpg (jpeg) или png;

- используя элемент выделения области графического редактора, выделяются чувствительные области изображения и записываются их координаты;

- выполняется описание выделенных чувствительных областей с помощью операторов <MAP> и <AREA>.

Синтаксис описания:

<MAP name="my_map">

<AREA параметры>

<AREA параметры>

. . . . . . . . . . . . . . . . . . .

<AREA параметры>

</MAP>

Параметр name оператора <MAP> используется при установке графической карты в HTML-документ. Этот параметр используется также в элементе <input> и объекте <object>.

Собственные параметры оператора <AREA>

Наименование атрибута Описание атрибута
shape Задает форму чувствительной области. Может принимать значения: default-точка; rect-прямоугольник; circle-окружность; poly – многоугольник.
coords Через запятую задаются координаты соответствующих фигур: default – координаты x и y; rect-координаты x и y верхнего левого и нижнего правого углов; circle-координаты x и y центра окружности и величину радиуса; poly-координаты x и y всех вершин многоугольника.
href Задает URI документа, который должен быть загружен, после щелчка пользователя левой клавишей мыши на чувствительной области карты.
nohref Задает области нечувствительные к щелчку мыши.
alt Альтернативный текст, который отображается программой просмотра или “всплывает” как подсказка.
tabindex Задает порядок перехода по ссылкам при помощи клавиши Tab при работе с клавиатурой.
accesskey Назначает “горячие” клавиши для быстрого доступа к элементам. Для Windows, например, accesskey="d" переводит фокус ввода на заданную область при нажатии Alt+D.

Кроме перечисленных, оператор AREA имеет общие атрибуты и атрибуты для установки обработчиков событий.

 

Пример 2.10.Организация графической карты

<HTML>

<HEAD><TITLE>Крепость</TITLE></HEAD>

<BODY>

<H2 align="center">Орешек.Общий план</H2><BR>

<MAP name="Крепость Орешек">

<IMG src="Крепость.gif" usemap="#Крепость Орешек">

<AREA href="флаг.htm " shape=rect coords="266, 32, 291, 54">

<AREA href="головин.htm " shape=rect coords="245, 155, 382, 255">

<AREA href="мемориал.htm " shape=rect coords="338, 77, 381, 91">

<AREA href="новтюрьма.htm " shape=rect coords="387, 55, 466, 76">

<AREA href="нарволя.htm " shape=rect coords="239, 40, 257, 55">

<AREA href="государева.htm " shape=rect coords="136, 83, 183, 152">

<AREA href="4корпус.htm " shape=rect coords="265, 96, 430, 132">

<AREA href="сттюрьма.htm " shape=rect coords="294, 54, 319, 71">

<AREA href="местоказни.htm " shape=rect coords="324, 54, 337, 64">

</MAP>

<UL><LI><A href="флаг.htm">Флажная башня</A>

<LI><A href="головин.htm">Башня Головина</A>

<LI><A href="мемориал.htm">Мемориальный комплекс</A>

<LI><A href="новтюрьма.htm">Новая(народовольческая) тюрьма</A>

<LI><A href="нарволя.htm">Памятник народовольцам</A>

<LI><A href="государева.htm">Государева башня</A>

<LI><A href="4корпус.htm">Четвертый тюремный корпус</A>

<LI><A href="сттюрьма.htm">Старая тюрьма</A>

<LI><A href="местоказни.htm">Место казни народовольцев</A>

<HR>

</UL>

</BODY>

</HTML>

 

Результат просмотра графической карты (рис.2.10).

 

Рис.2.10. Просмотр графической карты

Строка <IMG src="Крепость.gif" usemap="#Крепость Орешек"> отображает изображение, хранимое в файле Крепость с расширением gif.

Строки, ограниченные операторами <MAP> и </MAP>, дают описание графической карты с именем Крепость Орешек.

Строки с оператором <AREA> описывают отдельно каждую чувствительную область и содержат адрес href документа, который будет отображаться в окне программы просмотра при выполнении ссылки.

Графическая карта (см. рис.2.10) ничем не отличается от обычного изоражения. Различие проявляется при попадании указателя мыши на активную область. Указатель мыши в этом случае меняет вид.