Тег 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>
Атрибуты
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>
target=""
Указывает где нужно открыть содержимое ссылки. Можно использовать если указан атрибут href
_self загружает документ в текущем окне (вкладке) браузера
_blank загружает документ в новом окне (вкладке)
_parent загружает документ в родительской вкладке. Если нет родителя, параметр будет вести себя как _self
_top загружает документ в окне высшего уровня. Если родителя нет, опция ведёт себя как _self
Читайте также
Обсуждение (3)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
target="", self, _blank, _parent, _top