Атрибут coords

Описание

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

Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.

Синтаксис

<area coords='координата 1, координата 2, координата 3, ...'>

Дополнительно

Значения:

Набор координат определяется формой «горячей области», которая задаётся атрибутом shape. Отсчёт координат обычно ведётся от левого верхнего угла объекта или изображения и указывается в пикселях.
Для прямоугольника (shape='rect') задаются четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Рис. 1. Координаты для прямоугольника.

Для окружности (shape='circle') задаются три координаты — координаты центра окружности (X, Y) и её радиус (R), как показано на рис. 2.

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape='poly') последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Рис. 3. Координаты для полигона

По материалам webref.ru.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<map name="html5-css3">
<area shape="rect" coords="0,0,150,162" href="#html" alt="html" onclick="alert(`html`)">
<area shape="rect" coords="150,0,300,162" href="#css" alt="css" onclick="alert(`css`)">
</map>
<img width="300" src="https://mfs.gki-webik.ru/s?path=/images/example/html-css.jpg" alt="" usemap="#html5-css3">
</body>
</html>

Описание

Синтаксис

Дополнительно

Значения:

Пример

Читайте также

Тег <body>

Тег <table>

Тег <select>

Тег <progress>