Перейти к содержимому

HTML атрибут coords

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

Этот атрибут можно использовать на элементе <area>.

Верхний левый угол области имеет координаты 0,0.

Атрибут coords может принимать следующие значения:

  • x1, y1, x2, y2. Указывает координаты верхнего левого (x1, y1) и правого нижнего (x2, y2) углов прямоугольника.
  • x, y, radius. Указывает координаты центра (x, y) и радиус (radius) окружности.
  • x1, y1, x2, y2, .., xn, yn. Указывает координаты полигона.

Синтаксис

Синтаксис атрибута HTML coords

css
<area coords="value">

Пример использования атрибута HTML coords:

Пример использования атрибута HTML "coords"

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="css" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="php" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Практика

Какова функция атрибута 'coords' в HTML и как он используется?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.