Html area coords как узнать координату на рисунке

Навигационные карты

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

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

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега <img> (я думаю Вам не стоит напоминать о том что тег <img> имеет обязательный атрибут src который указывает путь к той или иной картинке <img src=»http://www.webremeslo.ru/html/knopki.jpg»> )

Назовём наш рисунок/карту именем panel . Это будет выглядеть так:

<img src=»http://www.webremeslo.ru/html/knopki.jpg» usemap=»#panel»>

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map> у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег <area> , закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:

• rect — прямоугольная область
• poly — область представляет собой некий многоугольник
• circle — область заданная окружностью

Прямоугольная область

Теперь наша карта приобретает такой вид:

<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
</map>

По сути теперь «зелёная» квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега <area> .

href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».

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

А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.

Полигон (многоугольник).

Займёмся «жёлтой кнопкой», она у нас представлена в виде треугольника. Для того чтобы выделить её «рабочую» область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много «Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124» фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений «Х1,У1,Х2,У2,Х3,У3»

Значит всё вместе пишем так:

<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>

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

Окружность

Ну и последняя «красная кнопка» она у нас круглая.. значит форма области будет круглой shape= «circle» . На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.

Доводим до ума..

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt , а также описание элементов атрибутом title .

Избавимся от рамки бордюра.. сделаем border=»0″ ..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:

Пересечение областей

Иногда удобно формировать «рабочую» область изображения «смешивая» разные формы..

Предположим, наша очередная кнопка имеет такой вид:

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

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

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

«Не область»

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.

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

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой

Следовательно, пример будет иметь такой вид:

Карта на сервере.

Отрывок из справочника (атрибуты тега <img> ):

usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает «на свою сторону» как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

А вот атрибут ismap тега <img> говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: «Публикация сайта»), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.

<a href=»http://www.site.ru/imagemaps/karta»><img srs=»knopki.jpg» ismap></a>

Где <a href=»http://www.site.ru/imagemaps/karta»> адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap , на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.

Полезные советы:

Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.

При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map> То есть писать вот так:

<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»20,20,80,80″>
</map>

<img src=»http://www.webremeslo.ru/html/knopki.jpg» usemap=»#panel»>

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

И ещё что касается загрузки..

<img src=»http://www.webremeslo.ru/html/knopki.jpg» usemap=»#panel»>

В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать

<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»20,20,80,80″>
</map>

Html area coords как узнать координату на рисунке

Рис. 48 Создание активной области с использованием системы координат.

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

  Рис. 49 Пример построения изображения-карты в HTML.

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:
    
  • Используя полученные знания составьте следующую изображение-карту:

  Карта изображения в HTML (навигационные карты). Урок №11

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

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

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

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

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

  Атрибуты areа

  1. Атрибут shape
  shape – определяет форму области (прямоугольником, кругом, многоугольником).
  Прямоугольник — » rect «. Пример: shape color: #008000;»>rect » ;
  круг — » circle «. Пример: shape color: #008000;»>circle » ;
  многоугольник — » poly «. Пример: shape color: #008000;»>poly «

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

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

  Прямоугольная область

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

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

  

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

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

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

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

  

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

  Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

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

  Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
  Пример написания:
  usemap color: #0000ff;»>»

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

  Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №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 Атрибут coords

  Атрибут coords (от англ. «coordinates» ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.

  В зависимости от типа фигуры (задаётся атрибутом shape ) активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)

  Синтаксис

  Значения

  В качестве значения указываются координаты активной области карты-изображения:

  Значение	Условия использования
  x1,y1,x2,y2	Для прямоугольника ( shape = «rect» ) определяется четыре координаты — координаты левого верхнего и правого нижнего углов
  x,y,R	Для окружности ( shape = «circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R)
  x1,y1,x2,y2. xn,yn	Для полигона (многоугольника) ( shape = «poly» ) последовательно указываются координаты каждой вершины

  Примечание: Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значением (то есть за основу берётся либо значение x , либо значение y ).

  Значение по умолчанию

  Применяется к тегам

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

  Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тэга <map> , а области-ссылки в них с помощью тэга <area> . Атрибут name тэга <map> связан с атрибутом usemap и создает связь между изображением и картой.