Создание графического меню с использованием навигационных областей HTML

Краткие теоретические сведения

В последнее время многие Web-страницы для организации ссылок используют так называемые карты-изображения. Реализация этой возможности предусмотрена языком HTML и позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу.

Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений.

Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников.

Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей. Конкретные правила записи конфигурации области зависят от выбранного варианта реализации.

Обычно используются карты-изображения серверные и клиентские. В данной лабораторной работе мы рассмотрим построение клиентских карт, поскольку серверная реализация данной возможности HTML выходит за рамки курса.

Для начала необходимо определить, какие именно области будут выделены. Зайдите в любой графический редактор и определите для каждой области свои координаты.

Создание карты рисунка начинается с описания

<map name="name">

Существуют три вида навигационных областей, для которых необходимо определить координаты их размещения на рисунке:

- rect - прямоугольник, для него необходимо определить координаты левого верхнего и нижнего правого угла “X₁, Y₁, X₂, Y₂”.

- poly - полигон, область, состоящая из большого количества разнообразных кривых, для этой области необходимо определить координату каждой точки, соединяющий кривые “X₁, Y₁, X₂, Y₂,…., X_n, Y_n,

- circle - окружность, определяется координата центра окружности и ее радиус “X, Y, R”.

Каждая область описывается отдельным тегом area:

<area shape=”rect” COORDS=”0, 0, 10, 20” href=”https://google.com”>

Для того, что бы связать созданную карту с рисунком, необходимо в описании рисунка img вставить свойство usemap:

<img src="image" usemap="#name">

Обратите внимание, что к имени карты в начале добавляется символ "#".

Рассмотрим небольшой пример создания навигационных областей.

Пример 1.

<map name=figure>
<area shape="circle" coords="104, 100, 42" href="https://www.google.com">
<area shape="poly" coords="153, 135, 186, 62, 228, 135" href="https://www.microsoft.com">
<area shape="rect" coords="241, 60, 320, 135" href="https://www.open.by">
</map>

Каждая фигура выделена в отдельную область.

Рисунок 1 – Пример использования геометрических фигур в качестве указателей гиперссылок