Тег <area>

Тег <area> задает активные области на изображении, которые являются ссылками. Активным областям можно задавать различные формы и размеры. Изображение, к которому определены активные области, называется картой-изображением. По внешнему виду такая карта вообще ничем не отличается от обычной картинки, но при этом она разбита на прозрачные области, которые служат ссылками. Тег <area> не имеет закрывающего тега и он всегда находится внутри тега <map>, который объединяет изображение с координатами активных областей:

            
  <map>
    <area атрибутыgt;
  </map>
  			
             

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

coords – задает активной области координаты.

accesskey – задает комбинацию клавишь, с помощью которых можно перейти к активной области.

shape – устанавливает форму области (окружность, прямоугольник и так далее).

alt – задает для активной области альтернативный текст.

href – указывает url-адрес, на который осуществляется переход.

hreflang – устанавливает язык документа, на который осуществляется переход.

tabindex –устанавливает последовательность перехода между активными областями, с помощью клавиши Tab.

nohref – задает область не имеющей ссылки на другой документ.

type – назначает MIME-тип документа, на который ведёт ссылка.

target – указывает браузеру, где открывать ссылку (в новой вкладке или той же).

Помимо своих атрибутов для тега <area> применяются универсальные атрибуты и события.

Пример:

        
<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег AREA</title>
    <meta charset="utf-8">
    <style type="text/css">
   .site-menu {
	   text-align:center; /* Выровняли картинку по центру */
   }
   .site-menu img {
    border: none; /* Убрали рамку вокруг изображения */
   }
  </style>
  </head>
  <body>
   <div class="site-menu">
    <p>В данном примере активными областями являются кружочки</p>
    <img src="menu.jpg" width="500" height="403" alt="Навигация сайта" usemap="#site-navigation">
   </div>
   <map name="site-navigation">
     <area href="home-page.html" shape="circle" coords="81,227,50" title="Главная">
     <area href="projects.html" shape="circle" coords="130,107,50" title="Проекты">
     <area href="portfolio.html" shape="circle" coords="250,56,50" title="Портфолио">
     <area href="services.html" shape="circle" coords="368,107,50" title="Сервисы">
     <area href="contacts.html" shape="circle" coords="419,227,50" title="Контакты">
   </map>
  </body>
</html>
			 
            
Смотреть пример