HTML :: Тег <map>

В HTML тег <map> (от англ. map – карта) используется как контейнер для элементов <area> при содании карт-изображений.

Атрибут name элемента <map> является обязательным, т.к. он связывает его с атрибутом usemap элемента <img>.

Синтаксис

	<map>
		...		
	</map>			
	
	Закрывающий тег: обязателен.

Атрибуты

name – задает имя карты-изображения.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/image-maps.html#the-map-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/map

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <br>
	Она ведет на три страницы с описаниями и обратными ссылками.
	
	<!--  Привязываем к изображению карту map_1 (не забываем про знак решетки)  -->
	<img src="example_1.png" alt="map_1" usemap="#map_1" width="300px">
	
	<map name="map_1">
		
		<!--  Указываем активные области карты  -->
		
		<area href="page_1.html" shape="rect" coords="25,44, 83,85">
		
		<area href="page_2.html" shape="circle" coords="134,65,25">
		
		<area href="page_3.html" shape="poly" 
		coords="186,85, 215,38, 247,84, 186,85">
		
	</map>
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №1

Пример карты-изображения можно также посмотреть на странице нашего учебного сайта №1 здесь.