Атрибут coords элемента <area> HTML

Тег HTML <area>

Определение и использование

coords Атрибуты определяют координаты области карты изображения.

coords Атрибуты Атрибут shape Используются вместе для указания размера, формы и положения области.

Совет:Координаты верхнего левого угла области равны 0,0.

Примечание:Если координаты в теге area пересекаются с другими областями, то предпочтение отдается最先出现的 тегу area. Браузерignore координаты за пределами границ изображения.

Пример

Используйте атрибут coords для определения координат каждого региона карты изображения:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Попробуйте сами

Синтаксис

<area coords="value">

Значение атрибута

Значение Описание
x1,y1,x2,y2 Определяет координаты верхнего левого и нижнего правого углов прямоугольника (shape="rect").
x,y,radius Определяет координаты центра и радиус (shape="circle").
x1,y1,x2,y2,...,xn,yn

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

Если первая и последняя пары координат не совпадают, браузер добавляет последнюю пару координат для закрытия многоугольника (shape="poly").

Подробное объяснение:

Атрибут coords тега <area> определяет координаты областей, чувствительных к мыши, в客户端е карты изображений. Значения координат и их смысл зависят от формы области, определенной атрибутом shape.

Ниже приведены правильные значения для каждого типа формы:

Круг: shape="circle", coords="x,y,z"

Здесь x и y определяют положение центра круга ("0,0" является координатами верхнего левого угла изображения), r — радиус круга в пикселях.

Многоугольник: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Каждая пара координат "x,y" определяет вершину многоугольника ("0,0" является координатами верхнего левого угла изображения). Для определения треугольника необходимо как минимум три пары координат; для высоковизовых многоугольников потребуется больше вершин.

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

Прямоугольник: shape="rectangle", coords="x1,y1,x2,y2"

Первая координата - координаты вершины угла прямоугольника, вторая пара координат - координаты вершины противоположного угла, "0,0" - координаты верхнего левого угла изображения. Обратите внимание, что определение прямоугольника является упрощенным способом определения многоугольника с четырьмя вершинами.

Например, следующий фрагмент XHTML в правом нижнем четверти 100x100 пixel изображения определяет чувствительную к мыши область и круговую область в центре изображения.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Тег HTML <area>