К атрибут принадлежит тегу Area

Тег area – это один из основных элементов языка разметки HTML, предназначенный для создания кликабельных областей на изображениях. С его помощью можно определить множество областей, каждая из которых может быть задана в виде прямоугольника, круга или многоугольника.

Атрибуты тега area играют важную роль в определении характеристик и поведения кликабельных областей. Они позволяют задать координаты, форму, размер и дополнительные параметры каждой области. Некоторые из наиболее распространенных атрибутов включают shape (форма области), coords (координаты точек), href (ссылка, куда будет переходить при клике на область) и alt (альтернативный текст, отображаемый при наведении на область).

Использование тега area и его атрибутов позволяет реализовать различные интерактивные элементы на веб-страницах, такие как интерактивные карты, изображения с кликабельными областями и графики с подробными подсказками. Это удобное средство для создания визуально привлекательных и функциональных элементов и оказывает важное влияние на пользовательский опыт.

Атрибуты тега Area для работы с изображениями

Тег <area> используется внутри тега <map> для определения активных областей на изображении. Атрибуты тега <area> позволяют задавать форму (shape) и координаты (coords) этих областей, а также указывать цель (href), которую следует загрузить при щелчке на такой области.

Атрибуты тега <area>:

• shape — указывает форму области и может принимать значения: «rect» (прямоугольник), «circle» (окружность), «poly» (многоугольник).
• coords — определяет координаты области, разделенные запятыми или пробелами. Количество координат зависит от значения атрибута shape.
• href — задает адрес URL, который будет открыт при щелчке на области.
• target — указывает, каким способом будет открыт URL (например, «_blank» — в новой вкладке, «_self» — в текущей вкладке).
• alt — определяет альтернативный текст, который будет отображаться, если изображение не загружено или недоступно.

Пример использования тега <area>:

1. Создайте изображение с использованием тега <img> и задайте ему атрибут usemap с указанием имени карты (id).
2. Создайте тег <map> с указанием имени карты (id) и атрибутом name.
3. Внутри тега <map> создайте теги <area> для каждой активной области на изображении, указав значения атрибутов shape, coords, href и возможно target и alt.
4. Закройте тег <map>.

Пример кода:

Применение тега Area для создания кликабельных областей на изображении

Тег Area в HTML используется для создания кликабельных областей на изображениях. Эти области могут быть использованы для определения ссылок или выполнения определенных действий при нажатии на них.

Тег Area должен быть вложен в тег Map, который определяет карту изображения. В атрибуте Shape тега Area указывается форма области, которая может быть прямоугольной, круглой или многоугольной. В атрибутах Coords указываются координаты области.

Например, рассмотрим следующий код:

<img src="image.jpg" alt="Картинка" usemap="#map" /><map name="map"><area shape="rect" coords="0,0,50,50" href="page1.html" alt="Область 1" /><area shape="circle" coords="100,100,50" href="page2.html" alt="Область 2" /><area shape="poly" coords="200,200,250,250,300,200" href="page3.html" alt="Область 3" /></map>

В этом примере на изображении определены три кликабельные области:

1. Прямоугольная область с координатами (0,0,50,50), которая будет переводить нас на страницу «page1.html».
2. Круглая область с центром в точке (100,100) и радиусом 50, которая будет переводить нас на страницу «page2.html».
3. Многоугольная область с точками (200,200), (250,250) и (300,200), которая будет переводить нас на страницу «page3.html».

При клике на каждую из указанных областей, будет выполнено соответствующее действие — будет осуществлен переход на указанную страницу.

Теги Area с их атрибутами позволяют создавать точечную навигацию по изображениям и добавлять расширенные возможности для пользователя.

Результат выполнения приведенного примера будет выглядеть следующим образом:

Особенности использования тега Area в HTML

Тег <area> предназначен для создания активной области внутри изображения в HTML. Он позволяет указать определенную область изображения, на которую можно нажать или навести курсором мыши для выполнения определенного действия. Область может быть прямоугольной, круглой, нескольких форм или полигональной.

Для использования тега <area> требуется поместить его внутрь контейнера <map>, который используется для создания карты изображения. Контейнер <map> определяет области, на которые будут ссылаться теги <area>. Один контейнер <map> может содержать несколько тегов <area>.

Тег <area> имеет ряд атрибутов, позволяющих определить форму и координаты области. Некоторые из наиболее часто используемых атрибутов:

• shape — определяет форму области. Возможные значения: rect (прямоугольник), circle (круг), poly (полигон).
• coords — определяет координаты (относительно изображения) области. Для каждой формы области координаты задаются по-разному.
• href — указывает URL, на который будет переходить при клике на область.
• alt — опциональный альтернативный текст, который будет отображаться при наведении курсора на область.

Пример использования тега <area> для создания прямоугольной области:

<img src="image.jpg" usemap="#map"><map name="map"><area shape="rect" coords="0,0,100,100" href="page.html" alt="Link to page"></map>

В данном примере указана область прямоугольной формы с координатами (0,0,100,100), которая ссылается на страницу page.html и отображает текст «Link to page» при наведении курсора.

Тег <area> может быть полезен при создании интерактивных изображений, например, карты сайта или плана помещения. Он позволяет разделить изображение на различные области и связать их с определенными действиями, что обеспечивает более удобное взаимодействие пользователей с сайтом.

Используя теги <map> и <area>, можно создавать сложные карты изображений с различными областями разной формы и размера, что позволяет добиться большей гибкости и функциональности взаимодействия с изображениями.