<area>

Размечает картинку невидимыми областями.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

Элементарная навигация по трём разделам Доки:

        
          
          <map name="doka">  <area shape="rect" coords="47,4,319,64" href="/html/" target="_blank" alt="HTML">  <area shape="rect" coords="46,69,318,129" href="/css/" target="_blank" alt="CSS">  <area shape="rect" coords="46,133,318,193" href="/js/" target="_blank" alt="JS"></map><img usemap="#doka">
          <map name="doka">
  <area shape="rect" coords="47,4,319,64" href="/html/" target="_blank" alt="HTML">
  <area shape="rect" coords="46,69,318,129" href="/css/" target="_blank" alt="CSS">
  <area shape="rect" coords="46,133,318,193" href="/js/" target="_blank" alt="JS">
</map>
<img usemap="#doka">

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Тег <area> помещаем внутрь <map> и прописываем два обязательных атрибута:

  • shape определяет форму области. Можно указать circle для круга, poly для произвольной формы или rect для прямоугольника (он же форма <area> по умолчанию);
  • coords задаёт координаты области. Для круга проще всего: x, y, R, где R — радиус круга, для прямоугольника формат x1, y1, x2, y2, а для произвольной формы x1, y1, x2, y2, ... , xn, yn. Поскольку у произвольной формы может быть много точек, будьте готовы к длинному коду 💀

Но пока что область «мёртвая», то есть её нельзя выбрать. Чтобы исправить это, добавим следующие атрибуты:

  • href для адреса ссылки;
  • target для способа эту ссылку открыть;
  • alt для альтернативной подписи.

А ещё можно указать:

  • download для скачивания файла по ссылке;
  • ping для перечисления URL-адресов ресурсов, которым нужно уведомление о переходе пользователя по гиперссылке;
  • rel для выбора типа ссылки;
  • referrerpolicy определяет, как JavaScript функция fetch устанавливает HTTP-заголовок Referer 🤖

Как понять

Секция статьи "Как понять"

Тег <area> создаёт на картинке невидимую область по координатам, а потом присваивает ей ссылку. Жмём на область — переходим по ссылке.

Подсказки

Секция статьи "Подсказки"

💡 Самые ёмкие в записи формы <area> — прямоугольник и круг, поскольку они требуют меньше всего координат. Если вам плохо от огромного кода, лучше отказаться от произвольных областей.

💡 Не стоит загружать в фотошоп картинку и выискивать каждую точку координат. В интернете полно бесплатных ресурсов, где можно загрузить изображение и просто кликать мышью по точкам, а программа выдаст готовый код! Искать можно так: «генератор координат HTML».

💡 С помощью <area> можно разметить на картинке отдельные предметы и сделать целый каталог:

        
          
          <map name="catalog">  <area shape="rect" coords="393,193,2,0"  href="https://ru.wikipedia.org/wiki/ВАЗ-2107" target="_blank" alt="Машина">  <area shape="poly" coords="427,47,427,124,474,208,659,149,659,59,601,0"  href="https://ru.wikipedia.org/wiki/Мыло" target="_blank" alt="Мыло">  <area shape="circle" coords="751,109,58"  href="https://ru.wikipedia.org/wiki/Пять_рублей" target="_blank" alt="Монета"></map><img usemap="#catalog">
          <map name="catalog">
  <area shape="rect" coords="393,193,2,0"
  href="https://ru.wikipedia.org/wiki/ВАЗ-2107" target="_blank" alt="Машина">
  <area shape="poly" coords="427,47,427,124,474,208,659,149,659,59,601,0"
  href="https://ru.wikipedia.org/wiki/Мыло" target="_blank" alt="Мыло">
  <area shape="circle" coords="751,109,58"
  href="https://ru.wikipedia.org/wiki/Пять_рублей" target="_blank" alt="Монета">
</map>
<img usemap="#catalog">

        
        
          
        
      
Открыть демо в новой вкладке