Атрибут coords тега <area> — координати області
Атрибут coords визначає координати області в зображення-карті.
Атрибут coords використовується разом з атрибутом форми shape, щоб визначити розмір, форму і розташування області
Загальний опис
автор: NagarD
- Порада
-
Координати верхнього лівого кута області є 0,0.
автор: с3с - Порада
-
Якщо дві області перекриваються між собою, пріоритет має та, яка визначена в коді HTML вище.
автор: с3с
Синтаксис
<area coords="<координата 1>, <координата 2>, <координата 3>, ...">Атрибут coords може отримувати 3 значень:
-
x1,y1,x2,y2 -
Якщо атрибут форми встановлений в положення "Rect", він визначає координати лівого верхнього кута і нижного правого кута прямокутника.
автор: с3с -
x,y,radius -
Якщо атрибут форми встановлений на "circle", він визначає координати центру кола і радіус.
автор: с3с -
x1,y1,x2,y2,…xn,yn -
Якщо атрибут форми встановлений на "poly", він визначає координати країв багатокутника. Якщо перша і остання координатні пари не збігаються, браузер повинен додати останню пару координат, щоб закрити полігон.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Картинка з трьома фігурами й картою з областей rect, circle та poly. Натисніть на будь-яку фігуру — унизу підсвітиться рядок із її координатами. Зверніть увагу: у rect це межі, а не кут із розміром.
HTML
<p>Натисніть на фігуру — унизу підсвітиться відповідна область.</p>
<img src="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='120'><rect%20width='320'%20height='120'%20fill='whitesmoke'/><rect%20x='10'%20y='10'%20width='100'%20height='100'%20fill='teal'/><circle%20cx='180'%20cy='60'%20r='50'%20fill='goldenrod'/><polygon%20points='260,110%20310,10%20310,110'%20fill='indianred'/></svg>"
width="320" height="120" alt="Квадрат, коло й трикутник" usemap="#figury">
<map name="figury">
<area shape="rect" coords="10,10,110,110" href="#r" alt="Квадрат">
<area shape="circle" coords="180,60,50" href="#c" alt="Коло">
<area shape="poly" coords="260,110,310,10,310,110" href="#p" alt="Трикутник">
</map>
<ul>
<li id="r"><code>rect</code> — <code>coords="10,10,110,110"</code>: ліва, верхня, права, нижня межа</li>
<li id="c"><code>circle</code> — <code>coords="180,60,50"</code>: центр X, центр Y, радіус</li>
<li id="p"><code>poly</code> — <code>coords="260,110,310,10,310,110"</code>: пари X,Y на кожну вершину</li>
</ul>CSS
img { display: block; margin-bottom: 10px; border: 1px solid #999; }
ul { padding-left: 20px; }
li { padding: 3px 6px; margin-bottom: 2px; }
li:target { background: gold; font-weight: 600; }
code { background: #f2f2f2; padding: 0 3px; }HTML
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='126'%3E%3Crect width='50' height='126' fill='%23e63946'/%3E%3Crect x='50' width='50' height='126' fill='%232a9d8f'/%3E%3Crect x='100' width='45' height='126' fill='%233a86ff'/%3E%3C/svg%3E" width="145" height="126" alt="Три кольорові смуги — карта посилань" usemap="#planetmap">
<p id="map"></p>
<map name="planetmap">
<area shape="rect" coords="0,0,50,150" href="#" alt="Sun" onclick="f('Ви нажали на червоний світлодіод')")>
<area shape="rect" coords="50,0,100,150" href="#" onclick="f('Ви нажали на зелений світлодіод')")>
<area shape="rect" coords="100,0,150,150" href="#" alt="Venus" onclick="f('Ви нажали на синій світлодіод')")>
</map>JS
function f(argument) {
document.getElementById("map").innerHTML = argument;
}
//# sourceURL=pen.jsHTML
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100'%3E%3Crect width='360' height='100' fill='%23f1f1f1'/%3E%3Ccircle cx='60' cy='50' r='50' fill='%23e63946'/%3E%3Ccircle cx='180' cy='50' r='50' fill='%232a9d8f'/%3E%3Ccircle cx='300' cy='50' r='50' fill='%233a86ff'/%3E%3C/svg%3E" alt="Три кольорові круги — карта посилань" border="0" width="360" height="100" usemap="#planetmap">
<p id="map"></p>
<map name="planetmap">
<area nclick="f('Ви нажали на вільне місце')")>
<area shape="circle" coords="60,50,50" href="#" alt="Sun" onclick="f('Ви нажали на червоний круг')")>
<area shape="circle" coords="180,50,50" href="#" onclick="f('Ви нажали на зелений круг')")>
<area shape="circle" coords="300,50,50" href="#" alt="Venus" onclick="f('Ви нажали на синій круг')")>
</map>JS
function f(argument) {
document.getElementById("map").innerHTML = argument;
}
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!