Навигационная карта в html. Тег

Из любого изображения можно сделать навигационную карту. Делается это с помощью тегов .... Вот как это работает:

В результате получится следующее:

Дадим описание данному коду:

. Определяем картинку, которая будет находится на странице в виде карты. Чтобы картинка связывалась с картой (стала картой) необходимо указать на это с помощью атрибута usemap. Название атрибута должно полностью совпадать с названием самой карты и содержать вначале символ "#". Указывается как usemap="#название (имя) карты".
. С тега начинается любая карта. Этот тег должен содержать обязательный атрибут name, с помощью которого карте даётся название (имя).
Группа тегов, с помощью которых рисунок разделяется на области. Каждая новая геометрическая область карты начинается с тега . В этом теге должна находится ссылка на веб-страницу, к которой будет совершён переход при нажатии на элемент. Атрибут alt определяет надпись, которая будет выведена на экран, в случае отсутствия изображения элемента карты. Атрибут shape указывает на то, какую геометрическую форму будет иметь область рисунка, отмеченная тегом . В html определяются четыре вида области:
1. Прямоугольник. Значение атрибута shape в этом случае будет равняться rect (от английского rectangle - прямоугольник). Пишется shape="rect".
2. Окружность (круг). В этом случае значение атрибута shape="circle".
3. Многоугольник. Значение атрибута share="poly".
4. Вся область рисунка. В этом случае значение атрибута shape="default". Используется редко, но, тем не менее, существует.
- Если элемент - прямоугольник. Его координаты определяются с помощью координат верхнего левого угла и нижнего правого. Вот как это выглядит (разберем на нашем рисунке):
  
  Мы имеем 2 оси: ОХ и ОY. Точка с координатами (0,0) находится в левом верхем углу, именно оттуда и идёт отсчёт координат. Я определял координаты углов с помощью программы Paint, но можно также с помощью любой другой. Координаты левого верхнего угла первого (самого верхнего) треугольника получились по оси Х 30 пикселей, по оси Y вышло 52 пикселя, то есть получилась точка с координатами (30,52). Таким же образом, координаты точки в правом нижнем углу прямоугольника равны (231,151). Записывается это так: coords="30,52 231,151". С двумя другими прямоугольниками дела обстоят точно также.
- С кругом всё иначе. Для начала покажем рисунок:
  
  Координаты в этом случае описываются с помощью центра окружности (в писелях) и её радиуса (тоже в пикселях). С осями дела обстоят также как и в случае с прямоугольниками. Атрибут coords здесь будет выглядеть так: coords="x,y,R".
- Многоугольник. Эта структура описывается при помощи координат точек всех углов многоугольника.
  
  Так будет выглядеть атрибут coords в примере с нашим многоугольником: coords="x₁,y₁, x₂,y₂, x₃,y₃, x₄,y₄, x₅,y₅, x₆,y₆".
. Этим тегом заканчивается любая карта.

2011 год.

| В раздел | Следующая>>