Привет. Давеча мне довелось иметь дело с такой специфической фичей html как карта изображения. Скажу честно, что мне не часто доводилось использовать её, и то, обычно, всё обходилось зонами в форме прямоугольника. Но это был не тот самый случай. Задачей было повесить ссылки на отдельные регионы изображения, которым выступала карта страны, и, к сожалению, ни о каких канвасах или svg не могло быть и речи. Только html только хардкор! Итак, задача поставлена, гугл активизирован, можно и начинать.

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map - контейнер карты и area - зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:

• coords - координаты зоны выделения
• href - ссылка, на которую будет произведён переход при клике на зону
• nohref - указывает на то, что зона не содержит ссылки
• shape - форма выделения
  • circle - зона выделения в виде круга
  • default - выделяет всю зону изображения
  • poly - зона выделения в виде многоугольника
  • rect - зона выделения в виде прямоугольника
• target - определяет где будет открываться ссылка

Чтобы подключить карту к изображению, указываем тегу map атрибут name с произвольным именем, а на изображения вешаем тег usemap , значение которому указываем в формате "#имя" .

Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly - полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла - x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.

Пишем Paint

Меня не тешила перспектива фотошопом находить координаты каждой точки, переписывать вручную цифры с окошка Info, а инструменты, которые попадались в гугле, были слишком монструозны. Было принято решения на коленке написать свой небольшой скрипт, который бы позволял расставлять точки просто кликая по нужной зоне на изображении, и выводил бы готовый код.

Для начала подготовим вёрстку:

В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.

Body { margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; } img { border: none; outline: none; display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .canvas { border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; } .canvas.draw { border-color: #3C0; } .canvas .inner { position: relative; } .canvas .point { width: 1px; height: 1px; background-color: #fff; border: 1px solid #000; overflow: hidden; position: absolute; } .bar { margin-bottom: 16px; } .info { background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding: 8px; word-wrap: break-word; }
В javascript"е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.

Var addPoint = function(e){ var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e.clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", {"class":"point"})); node.style.top = y-1+"px"; node.style.left = x-1+"px"; points.push({"x" : x, "y" : y, "node" : node}); e.preventDefault && e.preventDefault(); return false; };
Затем напишем функцию, которая будет генерировать html код нашей карты.

Var renderInfo = function(){ var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", "")); };
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

Приветствую, друзья. В этом видео мы продолжим разговор о картах изображений в HTML. Но для начала вспомним, о чем мы говорили в прошлом видео. Дело в том, что эти видео довольно тесно связаны между собой, и чтобы понять, о чем речь необходимо посмотреть предыдущие видео из раздела изображений.

В прошлом видео уроке мы как раз начали знакомство с картами изображений в HTML . Посмотрели, как она должна выглядеть в конечном итоге, правда, с применением скриптов. Немного поговорили о координатах. То есть о том, как мы их будем определять. Как Вы можете помнить, я остановил свой выбор на одном из способов, это способ с использованием атрибута ismap , так как, на мой взгляд, именно этот метод определения координат является самым простым и менее сложным, а значит именно он нам подходит.

В итоге в прошлом видео мы сделали картинку-ссылку . А затем из изображения сделали серверную карту изображения, которая поможет нам в определении координат активных областей.

Теперь настало время приступить к непосредственному созданию карты изображения в HTML. В этом видео мы охватим довольно большое количество информации, начиная с теории и переходя к практике.

Начнем с изучения еще двух HTML-тегов, это теги

HTML-тег map.

Тег

Данный тег имеет обязательный атрибут name . В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div .

HTML-тег area.

Тег отвечает за указание активных областей внутри контейнера

Здесь также хочу упомянуть о том, о чем забыл сказать в видео уроке, что этот тег легко заменяется тегом для указания гиперссылок в HTML-документе . То есть тегом . Если Вы помните, то именно у тега есть точно такие же атрибуты shape и coords , которые предназначены именно для указания базовой фигуры и ее координат.

Определение координат квадрата, прямоугольника, круга и многоугольника.

Также в этом видео уроке мы очень подробно разберем, как правильно определять координаты для той или иной фигуры. Сколько должно быть координат для определенной фигуры. Это связано с тем, что для каждой базовой фигуры есть свой набор координат и порядок их получения.

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

После чего на живом примере мы определим координаты квадрата и прямоугольника. Затем определим координаты окружности. И наконец, укажем координаты треугольника, который свою очередь играет роль многоугольника.

В общем, это видео станет очень полезным пособием для тех, кому стала интересна тема создания карт изображений в HTML.

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать !

В следующем видео уроке мы окончательно изучим тему создания карт изображений, поговорим о последнем атрибуте тега usemap , который поможет нам связать картинку с картой изображения. И рассмотрим еще парочку живых примеров карт изображений на разных картинках.

В html-документ.

Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

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

Атрибуты areа

1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником ).
Прямоугольник - "rect ". Пример: shape="rect " ;
круг - "circle ". Пример: shape="circle " ;
многоугольник - "poly ". Пример: shape="poly "

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».

Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

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

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1 » и пропишите его в теге

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
Пример написания:
usemap=" #имя_карты"

В нашем случае это будет выглядеть следующим образом:

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2

Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle ».

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

Для круга №1 возьмите такие координаты:

x=46, y=48; а длина радиуса - R=35

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:

Многоугольная область самая сложная область в навигационной карте.

Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly »

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

Разъяснение:
x1 ,y1 - координаты первого угла;
x2 ,y2 - координаты второго угла;
xN ,yN - координаты последнего угла

То есть, для многоугольника №2 это выглядит вот так:

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

HTML теги

Значение и применение

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

Поддержка браузерами

Тег			Opera		IExplorer	Edge
	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

Выбери фигуру:

"Доступны 4 фигуры для выбора" >

И так по порядку, что мы сделали в этом примере:

• Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
• Размещаем изображение-карту (тег
• Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
  • Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
  • Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
  • Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега