top-banner

Тег map в HTML: что это такое?

Дата последнего обновления статьи:

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<map>

Это изображениелицензировано подCC BY 4.0ccpersonperson

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

Синтаксис тега map

Базовый синтаксис тега map выглядит следующим образом:

<map name="mapname">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">
  <area shape="circle" coords="337,300,44" href="link2.html" alt="Link 2">
</map>

Атрибуты тега map

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

  • name - задает имя карты, которое используется в теге img.
  • id - задает уникальный идентификатор для карты.

Примеры использования тега map

<img src="image.jpg" usemap="#mapname" alt="Example Image">
<map name="mapname">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">
  <area shape="circle" coords="337,300,44" href="link2.html" alt="Link 2">
</map>

Советы по использованию тега map

  • Используйте тег map для создания интерактивных изображений.
  • Обязательно указывайте атрибут usemap в теге img.
  • Проверяйте доступность областей для пользователей с ограниченными возможностями.

Часто задаваемые вопросы (FAQ)

1 Что такое тег map?

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

2 Как использовать тег area?

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

Заключение

Тег map является важным инструментом для создания интерактивных изображений на веб-страницах. Правильное использование этого тега и его атрибутов поможет улучшить пользовательский интерфейс и доступность контента.

Для получения дополнительной информации о теге map, рекомендуем ознакомиться с официальной документацией на MDN.

Правила сайта