Карта-изображение на Web-странице

Карта-изображения на Web-странице предназначена для организации ссылок на другие ресурсы с различных областей рисунка.

Это может быть удобно, если части рисунка содержат изображения, «заголовочные» для страниц, на которые направляют ссылки. Как вариант возможно использование карты-изображения без ссылок для создания всплывающих подсказок к областям рисунка. Создание карты-изображения состоит из двух этапов: подготовка изображения и написание HTML-кода. Подготовка рисунка заключается в том, что выделяются области, предназначенные для ссылок, формируются фигуры трех стандартных типов – прямоугольник, круг, многоугольник. Для описания областей необходимы координаты характерных точек этих фигур. Пусть имеется рисунок. На нем имеются области, на которые необходимо назначить ссылки, они выделены на вспомогательном рисунке цветом. Для примера выбраны области всех трех типов. В строке состояния графического редактора Paint можно отследить координаты характерных точек фигур. Теперь все готово для написания HTML-кода. Оставляем без рассмотрения остальные элементы страницы, опишем только создание карты-изображения.

Сначала размещаем изображение на странице с помощью тега img. Структура тега, включающего изображение и связь с картой: <имя тега атрибут(источник)=значение(файл рисунка) атрибут(связь картой)=значение(имя карты) > Пример Ошибка! Не указано имя файла. Предполагается, что в папке с HTML-файлом находится файл рисунка с именем mypicture и типом jpg и далее будет описана карта с именем mymap, содержащая области-ссылки. Разумеется, значения атрибутов могут быть другими. Ошибка! Не указано имя файла.Теперь необходимо создать карту с именем mymap, описывающую области-ссылки. Для этого создаем контейнер map.Описание областейКаждая область описывается с помощью отдельного тега внутри контейнера map. Структура тега: <имя тега атрибут(форма)=значение(”rect| circle|poly ”) атрибут(координаты)=значение(число,…,число) атрибут(ссылка)=значение(имя файла) атрибут(альтернативный текст)=значение(текст)> Пример < area shape= ”rect” coords= 72,130,176,205 href= “page1.html” alt= “текст”> < area shape= ”circle” coords= 417,444,69 href= “page2.html” alt= “текст”> < area shape= ”poly” coords= 4,216,184,211,252,224,252,305,290,310,310,414,250,366,185,370,80,464,4,464 href=“page3.html” alt= “текст”> (Важно иметь в виду, что при перечислении координат пробелы недопустимы) Фрагмент страницы, карту-изображение и описание областей-ссылок Ошибка! Не указано имя файла.

Ссылки сработают, если названные в href страницы существуют в данной папке. Если ссылкам не соответствуют файлы, то в результате их срабатывания возникнет ошибка. Если атрибут href отсутствует, то области будут порождать только появление текста подсказок. Наоборот, если отсутствует атрибут alt, то переход по ссылкам не будет предваряться подсказками. Отсутствие обоих атрибутов лишает область всякого смысла. Для контроля точности описания областей можно временно разместить не основной рисунок, а размеченный на области. При использовании атрибута width в теге img может нарушиться соответствие координат ссылочных областей частям рисунка. Если необходимо уменьшить рисунок, то координаты в областях нужно тоже пропорционально уменьшить. Текст подсказки отображается не во всех браузерах. Эффектно выглядит карта-изображение, где рисунок является gif-анимацией с анимированными активными областями.