Атрибут shape
Синтаксис
HTML
XHTML
<img src="..." alt="..." usemap="#Name"> ... <map name="Name"> <p><a href="..." coords="..." shape="[значение]"> ... </a></p> </map>
Описание
Атрибут shape (от англ. "shape" ‒ «форма, фигура») указывает форму активной области карты изображения.
Примечание
Координаты активной области задаются параметром «coords».
Условия использования
Элемент a должен быть помещён внутрь элемента p или элемента div.
Поддержка браузерами
Chrome
Firefox
Поддерж.
Opera
Maxthon
IExplorer
Safari
iOS
Android
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | 13.6.1 Client-side image maps: the MAP and AREA elements shape = default|rect... DTD: Transitional
Strict
Frameset
|
| 5.0 | |
| 5.1 | |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
| 1.1 | Extensible HyperText Markup Language |
Значения
В качестве значения указывается ключевое слово, обозначающее форму активной области.
- default
- Указывает всю область карты-изображения.
- rect
- Определяет прямоугольную область.
- circle
- Определяет область в виде окружности.
- poly
- Определяет многоугольную область.
Значение по умолчанию: «default».
Пример использования
Листинг кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Атрибут shape (Элемент a)</title>
</head>
<body>
<h1>Активные области кары-изображения</h1>
<div>
<img src="/html/a/shape/example.png" style="width: 450px; height: 360px; background: #f8f8f8;" alt="Фигуры" usemap="#Menu" />
<map id="Menu">
<!-- Задаём активные области -->
<p><a shape="rect" coords="68,42,289,122" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" style="display: none;" title="Прямоугольник">Прямоугольник</a></p>
<p><a shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" style="display: none;" title="Окружность">Окружность</a></p>
<p><a shape="poly" coords="195,197,281,197,307,110,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" style="display: none;" title="Многоугольник">Многоугольник</a></p>
</map>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Атрибут shape (Элемент a)</title>
</head>
<body>
<h1>Активные области кары-изображения</h1>
<div>
<img src="/html/a/shape/example.png" style="width: 450px; height: 360px; background: #f8f8f8;" alt="Фигуры" usemap="#Menu" />
<map id="Menu">
<!-- Задаём активные области -->
<p><a shape="rect" coords="68,42,289,122" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" style="display: none;" title="Прямоугольник">Прямоугольник</a></p>
<p><a shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" style="display: none;" title="Окружность">Окружность</a></p>
<p><a shape="poly" coords="195,197,281,197,307,110,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" style="display: none;" title="Многоугольник">Многоугольник</a></p>
</map>
</div>
</body>
</html>
Атрибут shape (Элемент a)