Атрибут name HTML тега <map>

Значение и применение

Атрибут name (HTML тега <map>) задаёт имя карте-изображению. Является обязательным атрибутом, он связан с атрибутом usemap элемента <img> (создает связь между изображением и картой).

Поддержка браузерами

Атрибут	Chrome	Firefox	Opera	Safari	IExplorer	Edge
name	Да	Да	Да	Да	Да	Да

Синтаксис:

<map name = "mapname">

Значения атрибута

Значение	Описание
mapname	Имя карты-изображения.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута name HTML тега <map></title>
	</head>
	<body>
		<img src =  "star.png"  usemap =  "#zvezda" alt = "Пятиконечная звезда"> <!-- размещаем изображение, которое мы в последствии будем использовать при составлении изображении-карты --> 
		<map name = "zvezda" >  <!-- задаём имя карте-изображению --> 
			<area shape =  "poly" coords =  "251,33, 273,101, 344,101, 286,143, 309,210, 251,170, 192,213, 215,143, 158,101, 229,101" href =  "#" alt =  "Пятиконечная звезда"> <!-- определяем необходимое количество точек на изображении (многоугольную интерактивную область) --> 
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
Размещаем изображение-карту (тег <map>) и задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
С использованием тега <area>, мы определяем многоугольную интерактивную область (атрибут shape со значением "poly" ) в изображении-карте.

Результат нашего примера:

Пример использования атрибута name HTML тега <map> (имя карты-изображения).

HTML тег <map>