Тег <area>

Назначение тега <area>

применение тега <area>
Назначение тега <area>
Тег <area> предназначен для создания карты активных областей на изображении, применяется внутри контейнера <map> который служит для связи активных областей с изображением. С помощью связки <map> + <area> можно создать на любом изображении одну или несколько активных областей, которым с помощью атрибута href можно указать url адрес, и при клике на эту области будет переход по указанному адресу. Это существенно сокращает количество кода и элементов при создании графического сайта, или карты на изображении.

Небольшой пример создания активной области на изображении  

  <img src="/imagese.jpg" width="900" height="400" usemap="#YourMap">
  <map name="YourMap">
   <area shape=”rect” coords="140 90 100 180" href="adres.html" alt="Прямоугольник">
 </map>


В данном примере на изображении определен прямоугольник активной зоны, при нажатии по которой будет переход на adres.html. К тегу <area> можно применять стили CSS , например чтобы убрать рамку по умолчанию можно прописать border:none;

area { border:none;}

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

shape - форма активной зоны на изображении
href - задает адрес документа, на который следует перейти
alt - альтернативный текст для области изображения
accesskey - переход к области с помощью комбинации клавиш
coords - координаты активной области
hreflang - указывает язык документа, на который ведет ссылка
nohref - область без ссылки на другой документ
tabindex - задает последовательность перехода между элементами с помощью клавиши Tab
target - имя окна или фрейма, куда браузер будет загружать документ
type - устанавливает MIME-тип документа, на который ведёт ссылка

Более подробно описывать не буду, так как он редко используется, а если нужно создать сложную катру на изображении, то для этого существует множество специализированных сервисов. Вообще использование карты кликов на изображении дает очень хорошие возможности если нужно сделать красивый сайт обложка которого единое красивое изображение, на котором изображены дизайнерские элементы навигации.

Этот домен продается здесь: telderi.ru, и еще много других