Привет. Давеча мне довелось иметь дело с такой специфической фичей html как карта изображения. Скажу честно, что мне не часто доводилось использовать её, и то, обычно, всё обходилось зонами в форме прямоугольника. Но это был не тот самый случай. Задачей было повесить ссылки на отдельные регионы изображения, которым выступала карта страны, и, к сожалению, ни о каких канвасах или svg не могло быть и речи. Только html только хардкор! Итак, задача поставлена, гугл активизирован, можно и начинать.
Теория
Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map - контейнер карты и area - зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:- coords - координаты зоны выделения
- href - ссылка, на которую будет произведён переход при клике на зону
- nohref - указывает на то, что зона не содержит ссылки
- shape
- форма выделения
- circle - зона выделения в виде круга
- default - выделяет всю зону изображения
- poly - зона выделения в виде многоугольника
- rect - зона выделения в виде прямоугольника
- target - определяет где будет открываться ссылка
Так как зона выделения у меня должна была быть многоугольной, значение атрибута 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 необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
(необходимо обязательно перед именем указать решетку). - Размещаем изображение-карту (тег
), задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать. - Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
- Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега