<area>

С помощью тега <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">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать