Краткие теоретические сведения
В последнее время многие Web-страницы для организации ссылок используют так называемые карты-изображения. Реализация этой возможности предусмотрена языком HTML и позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу.
Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений.
Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников.
Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей. Конкретные правила записи конфигурации области зависят от выбранного варианта реализации.
Обычно используются карты-изображения серверные и клиентские. В данной лабораторной работе мы рассмотрим построение клиентских карт, поскольку серверная реализация данной возможности HTML выходит за рамки курса.
Для начала необходимо определить, какие именно области будут выделены. Зайдите в любой графический редактор и определите для каждой области свои координаты.
Создание карты рисунка начинается с описания
<map name="name">
Существуют три вида навигационных областей, для которых необходимо определить координаты их размещения на рисунке:
- rect - прямоугольник, для него необходимо определить координаты левого верхнего и нижнего правого угла “X1, Y1, X2, Y2”.
- poly - полигон, область, состоящая из большого количества разнообразных кривых, для этой области необходимо определить координату каждой точки, соединяющий кривые “X1, Y1, X2, Y2,…., Xn, Yn,
- 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>
<img src="geometry. jpg" usemap=#figure border=0>
Каждая фигура выделена в отдельную область.
Рисунок 1 – Пример использования геометрических фигур в качестве указателей гиперссылок