Тег 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>
    <area shape="rect" coords="150,0,300,162" href="#html" alt="html" onclick="alert('hello html')"></area>
</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>
    <area shape="circle" coords="135,81,45" onclick="alert('hello circle')"></area>
    <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>
    <area shape="rect" coords="150,0,300,162" href="#html" alt="html"></area>
</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

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

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

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