HTML-тег <area>

HTML-тег <area> используется для определения кликабельной области на карте изображения. Карты изображения позволяют связывать различные части изображения с различными целевыми объектами.

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

Пример HTML-тега <area>

Ниже показан простой пример карты изображения с использованием тега <area> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Image Map Example</h2>
        <img src="example.jpg" alt="Example Image" usemap="#example-map">

        <map name="example-map">
            <area shape="rect" coords="34,44,270,350" alt="Rectangle" href="https://example.com/rectangle">
            <area shape="circle" coords="150,150,75" alt="Circle" href="https://example.com/circle">
            <area shape="poly" coords="25,25,100,25,100,100,25,100" alt="Polygon" href="https://example.com/polygon">
        </map>
    </body>
</html>

Примечание: Атрибут coords определяет координаты области, доступной для нажатия. Область может быть прямоугольником( rect ), кругом( circle ) или многоугольником( poly ).

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

Тег <area> поддерживает следующие атрибуты:

  • форма: определяет форму области( rect , circle , poly или default ).
  • coords: Определяет координаты области в зависимости от формы.
  • href: URL-адрес связанного ресурса.
  • alt: Альтернативный текст для области, используемый для обеспечения доступности.
  • цель: указывает, где открыть связанный документ( _blank , _self и т. д.).
  • nohref: Указывает, что область не является кликабельной(устарело).

Стилизация HTML-тега <area>

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

Пример с CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                border: 2px solid black;
            }
            area {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h2>Styled Image Map Example</h2>
        <img src="example.jpg" alt="Styled Example" usemap="#styled-map">

        <map name="styled-map">
            <area shape="rect" coords="50,50,200,200" alt="Styled Rectangle" href="https://example.com/styled-rectangle">
        </map>
    </body>
</html>

Доступность HTML-тега <area>

При использовании тега <area> обязательно включите содержательные атрибуты alt для описания кликабельных областей для программ чтения с экрана. Это улучшит доступность вашей карты изображений.