ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

С помощью карт-изображений можно создать очень красивую панель навигации. В качестве ссылок на раздел сайта будут служить области на обычном изображении формата GIF или JPG.

К минусам такого подхода можно отнести:

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

Карта-изображение как панель навигации

Начнем с примера:

В окне веб-браузера это будет выглядеть ТАК.

В данный момент нас интересует само изображение, состоящее из 4-х фрагментов (глава1, глава2, глава3, глава4). Чтобы видеть границы изображения на веб-странице, параметру border тега <img> присвоено значение 1. Если навести курсор мыши на один из фрагментов изображения, то форма курсора даст понять, что это ссылка, а рядом с курсором появится всплывающая подсказка, например "Глава1".

Структура карт-изображений

Рассмотрим структуру, которая позволяет вставлять карту-изображение в HTML-документ.

Рассмотрим структуру, которая позволяет вставлять карту-изображение в HTML-документ.

Как видно, код для вставки карты-изображения состоит из двух частей. Первая часть с помощью тега <img> вставляет изображение в веб-страницу. Параметр usemap указывает, что изображение является картой. В качестве значения параметра указывается URL-адрес описания конфигурации. Если описание карты расположено в том же HTML-документе, то указывается название раздела конфигурации карты, перед которым добавляется символ #.

Вторая часть, являющаяся описанием конфигурации карты, расположена между тегами <map> и </map>. Активная область карты описывается с помощью тега <area>. Сколько на карте активных областей, столько и тегов <area> должно быть.

Тег map

Парный тег <map> служит для описания конфигурации областей карты-изображения. У тега <map> есть единственный параметр — name. Значение параметра name должно соответствовать имени в параметре usemap тега <img>.

Описание активной области на карте-изображении

Тег area описывает одну активную область на карте. Закрывающейся тег не требуется. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

Тег имеет следующие параметры:

• shape — задает форму активной области. Он может принимать 4 значения:
• • rest —активная область в форме прямоугольника (значение по умолчанию)
  • ;

    <area shape = "rest">

  • circle — активная область в форме круга;

  • <area shape = "circle">

  • poly — активная область в форме многоугольника;

  • <area shape = "poly">

  • default — активная область занимает всю площадь изображения. Данное значение не поддерживает Internet Explorer.

  • <area shape = "default">

• coords —определяет координаты точек отдельной активной области. Координаты указываются относительно верхнего левого угла изображения и задаются следующим образом:
• • для области типа rest задаются координаты верхнего левого и правого нижнего углов прямоугольника (координаты задаются через запятую);

  • <area shape = "rest" coords = "x1, y1, x2, y2">

    здесь x1 и y1 — координаты левого верхнего угла;

    x2 и y2 — координаты правого нижнего угла.

    <area shape="rect" coords="0, 0, 180, 18">

  • для области типа circle указываются координаты центра круга и радиус;

  • <area shape = "rest" coords = "x1, y1, r1">

    здесь x1 и y1 — координаты центра круга;

    r1 — радиус круга;

    <area shape="rect" coords="60, 60, 30">

  • для области типа poly перечисляются координаты вершин многоугольника в нужном порядке;

  • <area shape = "rest" coords = "x1, y1, x2, y2, x3, y3">

    здесь x1, y1, x2, y2, x3, y3 — координаты вершин многоугольника( в данном случае треугольника). Можно задать и большее количество вершин, иными словами можно описать активную область практически любой формы. Координаты последней вершины не обязательно должны совпадать с первой.

    <area shape = "rest" coords = "10, 100, 60, 10, 100, 100">

• href — задает URL-адрес ссылки. Может быть указан абсолютный или относительный адрес ссылки;<

• <area shape="rect" coords="0,0,180,18" href="/htmtest/102.html">

  <area shape="rect" coords="0,0,180,18" href="102.html">

• nohref —указывает, сто активная область не имеет ссылки. Используется для исключения части другой активной области;

• <area shape="rect" coords="60, 120, 60" nohref>

  <area shape="rect" coords="0, 0, 180, 180" href="/htmtest/102.html">

  В данном примере активной областью является площадь изображением 120х180 за исключением круга радиусом 60 в центре изображения.

• alt —задает текст всплывающей подсказки при наведении курсора мыши на активную область;

• <area shape="rect" coords="0,0,180,18" href="102.html" target="_blank" alt="Всплывающая подсказка">

• target — указывает, куда будет разгружен документ при переходе по ссылке. Может быть указано имя фрейма или одно из зарезервированных значений: _blank, _top, _self, _parent:

• <area shape="rect" coords="0,0,180,18" href="102.html" target="_blank">