Тег area

Определяет активную область на изображении (img) с помощью которых можно добавить события на данную область, а так же задать гиперссылку. area используется только внутри элемента map

<map name="html5-css3">
    <area shape="rect" coords="0,0,150,162" href="#css" alt="css" onclick="alert('hello css')">
    <area shape="rect" coords="150,0,300,162" href="#html" alt="html" onclick="alert('hello html')">
</map>
<img src="https://htmlbase.ru/storage/app/media/html5-css3.png" alt="" usemap="#html5-css3"></img>
css html
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Атрибуты

alt=""

Альтернативный текст, если изображение не доступно. В HTML5 этот атрибут обязателен только при наличии атрибута href.

shape=""

Тип фигуры активной области:

rect - прямоугольная фигура активной области.

circle - круглая фигура активной области.

poly - многоугольная фигура активной области.

default - вся область изображения

coords=""

Задает значения координат для активной области. Для разных типов фигур указывается разное количество значений:

rect - Задаются две пары значений x,y координат относительно изображения. coords="начальная точка по оси X, начальная точка по оси Y, конечная точка по оси X, конечная точка по оси Y"

circle - Значения x,y,r - где x,y - координаты центра круга относительно изображения и r - радиус круга. Например coords="50,50,25"

poly - Значения задаются парой для каждой вершины x,y - x1,y1,x2,y2,x3,y3,....

Все значения координат в HTML5 указываются в пикселях

<map name="figures">
    <area shape="rect" coords="24,28,56,132" onclick="alert('hello rect')">
    <area shape="circle" coords="135,81,45" onclick="alert('hello circle')">
    <area shape="poly" coords="217,50,264,40,287,83,254,118,211,98" onclick="alert('hello poly')"></area>
</map>

<img src="https://htmlbase.ru/storage/app/media/area-figures.jpg" alt="" usemap="#figures"></img>
href=""

Гиперссылка для активной области. При нажатии на область пользователь будет перенаправлен на указанный адрес. Работает также как и в теге a

<map name="example-html5-css3">
    <area shape="rect" coords="0,0,150,162" href="#css" alt="css">
    <area shape="rect" coords="150,0,300,162" href="#html" alt="html">
</map>
<img src="https://htmlbase.ru/storage/app/media/html5-css3.png" alt="" usemap="#example-html5-css3"></img>
css html
target=""

Указывает где нужно открыть содержимое ссылки. Можно использовать если указан атрибут href

_self загружает документ в текущем окне (вкладке) браузера

_blank загружает документ в новом окне (вкладке)

_parent загружает документ в родительской вкладке. Если нет родителя, параметр будет вести себя как _self

_top загружает документ в окне высшего уровня. Если родителя нет, опция ведёт себя как _self

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

Обсуждение (3)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии


Umida
Прошу прошения, может я чего-то не поняла, но не нашла примера на этой странице к атрибутам~
target="", self, _blank, _parent, _top
DmitryD
Area это ведь одиночный, а не парный тег? У вас в верхнем примере оба тега имеют ещё и закрывающий тег.
Uliana
Этот элемент без закрывающего тега и у нее больше атрибутов может быть чем здесь представлено. обновите информацию.