Атрибут shape
Синтаксис
HTML
XHTML
<img src="..." alt="..." usemap="#Name">
...
<map name="Name">
<area coords="..." (href="..." | nohref) alt="..."
shape="[значение]">
...
</map>
Описание
Атрибут / параметр shape (от англ. "shape" ‒ «форма, фигура») указывает форму активной области карты-изображения.
Примечание
Координаты активной области задаются атрибутом «coords».
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | ||
| 3.2 | MAP | |
| 4.01 | 13.6.1 Client-side image maps: the MAP and AREA elements shape = default|rect... DTD: Transitional
Strict
Frameset
|
Перевод |
| 5.0 | 4.7.12 The area element The shape attribute... |
|
| 5.1 | 4.7.16. The area element The shape attribute... |
|
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
|
| 1.1 | Extensible HyperText Markup Language | |
Значения
- default
- Указывает всю область карты-изображения.
- rect
- Определяет прямоугольную область.
- circle
- Определяет область в виде окружности.
- poly
- Определяет многоугольную область.
Значение по умолчанию: «default».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр shape (Элемент area)</title>
</head>
<body>
<h1>Формы активных областей кары изображения</h1>
<img src="/examples/images/figures.png" style="width: 450px; height: 360px; background: #EDEDED;" alt="Фигуры" usemap="#Menu">
<map name="Menu">
<area shape="rect" coords="68,42,290,123" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Прямоугольник" title="Прямоугольник">
<area shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" alt="Окружность" title="Окружность">
<area shape="poly" coords="195,197,281,197,307,108,334,197,420,197,351,249,377,337,307,283,236,337,264,249,195,197" href="https://ru.wikipedia.org/wiki/%CC%ED%EE%E3%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Многоугольник" title="Многоугольник">
</map>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр shape (Элемент area)</title>
</head>
<body>
<h1>Формы активных областей кары изображения</h1>
<img src="/examples/images/figures.png" style="width: 450px; height: 360px; background: #EDEDED;" alt="Фигуры" usemap="#Menu">
<map name="Menu">
<area shape="rect" coords="68,42,290,123" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Прямоугольник" title="Прямоугольник">
<area shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" alt="Окружность" title="Окружность">
<area shape="poly" coords="195,197,281,197,307,108,334,197,420,197,351,249,377,337,307,283,236,337,264,249,195,197" href="https://ru.wikipedia.org/wiki/%CC%ED%EE%E3%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Многоугольник" title="Многоугольник">
</map>
</body>
</html>
Параметр shape (Элемент area)