HTML-тег <map>

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

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

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

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

<!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>

Примечание: Атрибут usemap в теге <img> связывает изображение с элементом <map> по имени. Теги <area> на карте определяют области, доступные для кликов.

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

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

Имя: Указывает имя карты изображения. На это имя ссылается атрибут usemap соответствующего тега <img> .

Стилизация тега <map>

Тег <map> не отображается напрямую и не может быть стилизован. Однако связанное с ним изображение и кликабельные области( <area> ) можно стилизовать для улучшения пользовательского опыта.

Расширенный пример HTML-тега <map>

Вот продвинутый пример, в котором для изображения определены несколько областей, доступных для нажатия:

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

        <map name="world-map">
            <area shape="rect" coords="50,50,150,150" alt="North America" href="https://example.com/north-america">
            <area shape="circle" coords="300,300,75" alt="South America" href="https://example.com/south-america">
            <area shape="poly" coords="400,100,450,150,400,200,350,150" alt="Europe" href="https://example.com/europe">
        </map>
    </body>
</html>

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

Для улучшения доступности при использовании тега <map> :

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