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

Читайте также:

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

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

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

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

- выполняется описание выделенных чувствительных областей с помощью операторов <MAP> и <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>

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

Дата добавления: 2015-10-02; просмотров: 71 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
Графика в HTML-документах	\|	Ссылки в HTML-документах

mybiblioteka.su - 2015-2024 год. (0.008 сек.)