Атрибут coords элемента <area> HTML
Определение и использование
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 |
Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |