Навигационная карта MAP

Скачать материалы к уроку

Навигационные карты позволяют определять области внутри рисунка и назначать каждой области определенное действие (например, загрузку документа, запуск программы и т.д.).

Навигационная карта MAP Навигационная карта MAP
а б

Рисунок 1

Например:

  1. На рис. 1,а представлена географическая карта. Она представляет из себя одно графическое изображение (например, в формате jpg). Каждая из географических областей (Московская, Свердловская и др.) является «горячей» зоной, при щелчке по которой происходит загрузка информации об отдельно взятой области.
  2. На рис. 1,б в правой части изображены кнопки с названиями уроков. В целом меню уроков представляет одно изображение (например, в формате jpg). При щелчке по кнопке «Урок №1» происходит загрузка содержания урока 1, при щелчке по кнопке «Урок № 2» происходит загрузка содержания урока 2 и так далее.
  3. На рис. 1,б в левой части изображения показаны формы, которые могут быть использованы в навигационной карте, таких форм только три: круглая (овальной формы быть не может), многоугольная (может быть и треугольник или звезда, как разновидности многоугольника и прямоугольная форма (может быть квадрат, как разновидность прямоугольника со всеми одинаковыми сторонами).
  4. Откройте в браузере файл map1.html из папки navigat_map. Вы видите изображение, на котором три формы: квадратная с цифрой 1, круглая с цифрой 2 и звезда (многоугольник) с цифрой 3 (рисунок 2).

    Навигационная карта MAP

    Рисунок 2

  5. Откройте этот же файл в Notepad++. Вы видите, что на самом деле это одно изображение map1.jpg. Три зоны: квадратная, круглая и звезда (многоугольная форма) описаны с помощью координат (рис. 3).

    При щелчке по квадрату с номером 1 загружается документ 1, при щелчке по кругу с номером 2 загружается документ 2, при щелчке по звезде – документ 3. Таким образом, каждая зона изображения map1.jpg отвечает за загрузку определенного документа (web-страницы).

    Навигационная карта MAP

    Рисунок 3

  6. Откройте в браузере файл map2.html из папки navigat_map (рис. 4). Вы видите изображение трех кнопок, при щелчке по каждой из которых аналогично предыдущему примеру загружается свой определенный документ.

    Навигационная карта MAP

    Рисунок 4

  7. Откройте этот же файл в Notepad++. Вы видите, что на самом деле это одно изображение map2.jpg. Растровое изображение map2.jpg разбито на зоны с помощью описания координат для каждой кнопки (рис. 4).

    Навигационная карта MAP

    Рисунок 5

  8. Еще один пример использования навигационных карт можно просмотреть, запустив файл shop.html (рис. 6). При щелчке по каждому элементу (бантик, сумка, юбка, платье) запускаются разные web-страницы.

    Навигационная карта MAP

    Рисунок 6

Как же создать «горячие» зоны на растровом изображении, т.е. навигационную карту?

Навигационные карты создаются с помощью элементов MAP и AREA.

Элементы MAP и AREA

Тег Назначение
MAP Относится к контейнерному типу, и имеет только один атрибут — name, определяющий имя навигационной карты.
AREA определяет набор областей внутри навигационной карты, заданной элементом MAP. Является одиночным элементом, помещаемым в контейнер MAP соответствующей навигационной карты. Элемент AREA может включать в себя атрибуты.

Атрибуты элемента AREA

Атрибут Назначение
SHAPE Определяет форму области (фигуру) внутри изображения навигационной карты.
Имеет значения:
default – задает область, занимающую все изображение целиком;
rect – определяет прямоугольную область;
circle – определяет круглую область;
poly – определяет многоугольную область.
COORDS Определяет положение фигуры на карте. Число и порядок зависят от фигуры, определенной атрибутом SHAPE.
Имеет значения:
rect: х, y – координаты левого верхнего угла прямоугольника; x1, y1 – координаты правого нижнего угла прямоугольника;
circle: х,y – координаты центра; r – радиус
Если радиус указан в процентах, браузер вычисляет значение радиуса в зависимости от ширины и высоты изображения карты и использует наименьшее из двух полученных значений.
poly: х1, y1, x2, y2, ………….xN, yN (координаты вершин многоугольника)
Координаты задаются относительно левого верхнего угла изображения (img).
Значения задаются либо в пикселах, либо в процентах от доступного пространства экрана.
При перечислении все значения отделяются друг от друга запятыми.
NOHREF Указывает, что с соответствующей ему областью не связана ни одна ссылка.

Структура навигационной карты

   <img src=“image.jpg” usemap=#karta>
   <map name=karta>
      <area (здесь д.б описание координат формы) href=doc_1.html>
      <area (здесь д.б описание координат формы)  href=doc_2.html>
      <area  (здесь д.б описание координат формы) href=doc_3.html>
   …………..
   </map>

Пояснения к структуре навигационной карты

  1. Атрибут name определяет имя навигационной карты, и служит для связи карты с элементом IMG рисунка, используемого для отображения навигационной карты.
  2. В элементе IMG определяется атрибут usemap, значение которого должно совпадать со значением атрибута name элемента MAP.
  3. Для определения активных областей внутри карты в контейнер map может быть включено любое число элементов AREA.
  4. Атрибут HREF, задает ссылку на конкретную web-страницу.
  5. Если несколько определенных в контейнере MAP фигур перекрываются, то приоритет имеет первый элемент, указанный в контейнере MAP (т.е. на ввод пользователя будет реагировать именно этот элемент).
  6. Рассмотрим примеры применения вышеперечисленных тегов и атрибутов.
  7. На всех рисунках обозначены координаты изображения image.jpg. Начало отсчета в навигационных картах всегда находится в левом верхнем углу изображения.

Координаты активных областей AREA

Пример 1

<img src="image.jpg" usemap=#karta>
<map name=karta>

<area        href=doc_1.html
        alt="Переход_1"
        shape=rect
        coords=0,20,300,120>

<area        href=doc_2.html
        alt="Переход_2"
        shape=circle
        coords="200,300,150">

<area        href=doc_3.html
        alt="Переход_3"
        shape=poly 
                coords=30,500,100,570,200,550,150,350>
</map>
   
Навигационная карта MAP
Рисунок 7

Пояснения к коду

  1. Для прямоугольной формы (желтый цвет в коде) в коде описываются координаты двух точек:
    • левый верхний угол прямоугольника (т. 1 на рисунке 7, в коде зеленым цветом обозначены первая цифра 0 – координаты точки 1 по оси Х, вторая цифра 20 – координаты точки 1 по оси Y);
    • правый нижний угол (т.2 на рисунке 7, в коде голубым цветом обозначены первая цифра 300 – координаты точки 2 по оси Х, вторая цифра 120 – координаты точки 2 по оси Y).
  2. Для круглой формы (сиреневый цвет в коде) в коде описываются координаты центра и радиус окружности:
    • координаты центра в коде обозначены светло-серым цветом (т. 3 на рисунке), первая цифра 200 – координата центра по оси Х, вторая цифра 300 – координата центра по оси Y;
    • цифра 150 – величина радиуса.
  3. Для многоугольной формы (персиковый цвет в коде) в коде описываются координаты каждой из вершин (защитный цвет):
    • первая пара цифр 30,500 – координаты точки 4;
    • вторая пара цифр 100,570 – координаты точки 5;
    • третья пара цифр 200,550– координаты точки 6;
    • четвертая пара цифр 150,350 – координаты точки 7.

Пример 2

Задание: зарисуйте схему навигационной карты и обозначьте штриховкой зону, которая будет ссылкой на doc2.html

  <img src="image.jpg" usemap=#map>
  <map name=map>
     <area href=doc_1.html  alt="Переход_1"  shape=rect coords=0,10,100,130>
     <area href=doc_2.html  alt="Переход_2" shape=circle  coords=60,90,50>
  </map>
  

Пример 3

Атрибут nohref используется для создания неактивных зон внутри навигационной карты.

Ниже приведен код навигационной карты. На рисунке 8 рядом заштрихована зона, которая будет ссылкой на документ doc_2.html. Незаштрихованная зона прямоугольника не будет ссылкой на документ doc_2.html, так как она перекрывается (выше по коду) круглой зоной, которая имеет атрибут nohref.

  <img src="image.jpg" usemap=#map>
  <map name=map>

   <area nohref   
      alt="Неактивная область"
      shape="circle"
      coords=60,90,40>

   <area href="doc_2.html"
      alt="Переход"
      shape="rect"
      coords="25,25,75,150">

  </map>  
Навигационная карта MAP
Рисунок 8

Первый элемент area определяет небольшую круглую область, с которой не связана ни одна ссылка.

Второй элемент area содержит ссылку и определяет прямоугольную фигуру большего размера.

Обе фигуры перекрываются и, поскольку первым в контейнере MAP стоит элемент area неактивной фигуры, то указание этой фигуры мышью не приводит ни к каким действиям, кроме отображения соответствующей подсказки, заданной атрибутом alt.

Как определить координаты точек на изображении?

  1. Открыть изображение в Photoshop.
  2. Отобразить линейки, в качестве единиц измерения линеек выставить пикселы. Для этого правой кнопкой мыши щелкнуть по линейке и выбрать пиксели.
  3. Установить начало координат в левый верхний угол изображения. Для этого в верхнем левом углу программы на пересечение линеек подвести курсор, зажать левую кнопку мыши и перетащит курсор в левый верхний угол изображения. Убедиться по линейкам, что нулевой отсчет совпадаетм с верхним левым углом изображения.
  4. Через каждую точку, для которой необходимо определить координаты для написания в коде, выставить две направляющие: горизонтальную и вертикальную. Направляющие вытягиваются из линеек при нажатой левой кнопке мыши.
  5. На линейках по направляющим определить координаты (рис. 9).

Навигационная карта MAP

Рисунок 9