Теги area map – Можно ли через CSS или как-то ещё офрмить map area? — Хабр Q&A

Leave a Comment / Разное / By /

Содержание

Тег | HTML справочник

HTML теги

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

Тег <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент <map> содержит ряд <area> тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

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

Атрибуты

АтрибутЗначениеОписание
namemapname

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

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибутаОпределение
defaultВесь регион.
rectПрямоугольная область (x1,y1,x2,y2).
circleКруглая область (x,y,r- радиус).
polyМногоугольную область (x1,y1,x2,y2,…,xn,yn).

Создание активной области с использованием системы координат.

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

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

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

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect»), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle»), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly»). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок):
      первая       точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.

Результат нашего примера в браузере (кликабельно) и на изображении:

Пример построения изображения-карты в HTML.

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

В HTML5, если у элемента указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.

Значение CSS по умолчанию

map {
display: inline;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <map> — в связывании тега <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <img>, задаваемого атрибутом usemap, так и в теге <map>, устанавливаемого атрибутом name.

Синтаксис

HTML
<map name="имя">
  <area атрибуты>
</map>
XHTML
<map name="имя">
  <area атрибуты />
</map>

Атрибуты

name
Имя карты-изображения.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
  <div><img src="images/ecctitle.png" 
    alt="Детский образовательный центр"><br>
   <img src="images/navigate.png" alt="Навигация по сайту"
    usemap="#Navigation"></div>
   <p><map name="Navigation">
    <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
    <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
    <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
    <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
    <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
    <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
    <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
   </map></p>
 </body>
</html>

Карта изображений — Википедия

Материал из Википедии — свободной энциклопедии

Карта изображений (англ. image map, иногда сенсорная карта или графическая карта) — это графический объект языка разметки HTML, связанный с изображением и содержащий специальные области (активные зоны), при нажатии на которые происходит переход по определённому URL (при помощи javascript можно установить другие действия). Использование карт изображений позволяет хранить несколько ссылок в одном изображении.

Для добавления карты изображений на веб-страницу используется парный HTML-тег <map>, в атрибуте «name» которого указывается уникальный в пределах документа идентификатор карты. Внутрь него добавляются непарные теги <area>, каждый из которых описывает одну активную зону. Затем в тег <img>, который необходимо связать с картой, добавляется атрибут usemap, содержащий имя привязываемой карты. Значение атрибута должно начинаться со знака решётки. При этом в теге <img> должны быть явно указаны размеры изображения.

map[править | править код]

  • name — идентификатор карты изображений. Уникален в пределах документа. В XHTML атрибут name считается устаревшим, и вместо него предлагается использовать атрибут id [1].

area[править | править код]

  • shape — форма активной области. Допустимые значения: circle (окружность), rect (прямоугольник), poly (полигон).
  • alt — альтернативный текст области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
  • title — позволяет задать всплывающую подсказку для активной области.
  • coords — координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение «0,0». Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области:
  • Для окружности задаются координаты центра круга и радиус:
  • Для прямоугольника — координаты левого верхнего и правого нижнего угла:
<area coords="x1,y1,x2,y2">
  • Для полигона задаются координаты его вершин:
<area coords="x1,y1,x2,y2,…,xN,yN">
При этом, чтобы «закрыть» многоугольник, первая и последняя пары координат X и Y должны быть одинаковыми. Если эти значения не одинаковы, браузер должен вычислить дополнительную пару координат, чтобы закрыть многоугольник.
  • href — Определяет адрес ссылки для области. Правила записи такие же, как и для тега <А>.

Ниже приведён код, создающий карту изображений и привязывающий её к изображению:

<html>
    <body>
        <img usemap="#somemap" src="upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png">
        <map name="somemap">
            <area shape="rect" coords="6, 7, 140, 196" href="ru.wikipedia.org/wiki/Прямоугольник">
            <area shape="circle" coords="239, 98, 92" href="ru.wikipedia.org/wiki/Круг">
            <area shape="poly" coords="386, 16, 344, 56, 350, 189, 385, 132, 489, 190, 496, 74" href="ru.wikipedia.org/wiki/Многоугольник">
        </map>
    </body>
</html>

В результате получится следующее (активные зоны расположены над изображениями фигур):

Figures for imagemap.png

Преимущества[править | править код]

  1. Карты позволяют задать любую форму области ссылки. Учитывая, что компьютерные изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным.
  2. С одним файлом удобнее работать — не приходится заботиться о состыковке отдельных фрагментов.

Недостатки[править | править код]

  1. Нельзя установить альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Если отключить просмотр изображений, то в итоге увидим лишь один пустой прямоугольник.
  2. При сложной форме области ссылки увеличивается объем кода HTML. Контур состоит из набора прямых отрезков, для каждой точки которого следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
  3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки и т.д.

HTML :: Карты-изображения

Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег <img> между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента ‘a’. Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

Карта-изображение (от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Карты-изображения применяются в двух вариантах: серверном и клиентском, которые задаются, соответственно, атрибутами ismap и usemap элемента ‘img’. Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента ‘map’, перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

Серверные карты-изображения строятся следующим образом: создается элемент ‘a’, атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки ‘a’ располагается элемент ‘img’, у которого указывается атрибут ismap. При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET, т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/belarusweb_files/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="javascript/code_1.js"></script>
	<title>Серверная карта-изображение</title>
</head>
<body>
	Это изображение &ndash; серверная карта. <br>
	
	<!-- Создаем серверную карту -->
	<a href="php/test.php">
		<img src="images/html_images/example_4_3a.png" alt="map_2" ismap>
	</a> 
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №1. Формирование серверной карты-изображения

Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов ‘map’ и ‘area’. Элемент ‘map’ формируется парным тегом <map> (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name. Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента ‘img’, выступающего в роли клиентской карты-изображения. Кроме того, элемент ‘map’ является контейнером для хранения элементов ‘area’, каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент ‘area’ при помощи одиночного тега <area> (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3).

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Клиентская карта-изображение</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <br>
	
	<!-- Привязываем к изображению карту map_3 (не забываем про знак решетки) -->
	<img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3">
	
	<map name="map_3">
		<!-- Указываем активные области карты -->
		<area href="page_1.html" shape="circle" coords="70,75,50">
		
		<!-- Эта ссылка откроется в новом окне -->
		<area href="page_2.html" target="_blank" shape="poly" 
		coords="130,125, 150,125, 140,25, 130,125">
		
		<area href="page_3.html" shape="rect" coords="170,125, 240,25">
	</map>
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №3. Формирование клиентской карты-изображения

Поскольку элемент ‘area’ служит для создания гиперссылок, то он обладает всеми атрибутами элемента ‘a’: href, target, download, rel, hreflang, type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt, shape и coords (от англ. coordinates).

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

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px. В качестве значений shape принимает:

  • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″;
  • «default» – вся область изображения;
  • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x, y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″;
  • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x, y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″.

Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.

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

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

Учебник HTML 5. Статья «Построение изображения-карты»

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

Тег <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент <map> содержит ряд <area> тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

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

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибутаОпределение
defaultВесь регион.
rectПрямоугольная область (x1,y1,x2,y2).
circleКруглая область (x,y,r- радиус).
polyМногоугольную область (x1,y1,x2,y2,…,xn,yn).

Рис. 48 Создание активной области с использованием системы координат.

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

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

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

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.

Результат нашего примера в браузере (кликабельно) и на изображении:

Рис. 49 Пример построения изображения-карты в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую изображение-карту:

Практическое задание № 26.

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

Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.


Image Map. Карты изображений

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

Карта изображения определяется парным тегом <map>…</map>. HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name.

Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег <area>.

Атрибуты тега <area>
shapeОчертания области. Возможные значения атрибута:
rectпрямоугольник;
circleкруг;
polyмногоугольник.
coordsКоординаты области.
Для прямоугольника – координаты левого верхнего и правого нижнего углов.
Для круга – координаты центра и радиус.
Для многоугольника – координаты всех углов.
hrefАдрес файла, на который делается ссылка.
nohrefОзначает, что эта область не действует. Удобен для вырезания дыр.
altТекстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.
titleВсплывающий текст, появляющийся при наведении курсора мышки на заданную область.

Координаты по умолчанию измеряются в пикселях.

Начало отсчета координат – это верхний левый угол экрана, т.е.

XY
Примеры различных форм областей карты изображений
<!-- прямоугольник 10 на 10 пикселей в верхнем левом углу изображения -->
<area shape="rect" coords="0, 0, 9, 9">

<!-- круг с радиусом в 5 пикселей и центром, расположенном в точке (10, 10) -->
<area shape="circle" coords="10, 10, 5">

<!-- треугольник с координатами вершин (10, 50), (15, 20) и (20, 50) -->
<area shape="poly" coords="10, 50, 15, 20, 20, 50">

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

Чтобы использовать изображение, как карту, в тег <img> необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак «#».

Пример использования Image Map
<map name="map0">
    <area shape="rect" coords="0, 0, 402, 42" href="#area1">
    <area shape="rect" coords="0, 42, 132, 204" href="#area2">
    <area shape="poly" coords="260, 96, 331, 42, 403, 96, 377, 180, 286, 180" href="#area4">
    <area shape="circle" coords="180, 100, 90" href="#area3">
    <area shape="rect" coords="0, 0, 402, 204" href="#area5">
</map>
<img src="imagemap.gif" border="0" usemap="#map0">

При кликах на различные области данного изображения меняется цвет соответствующего текста:

Область 1
Область 2
Область 3
Область 4

Применение технологии Image Map

Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.

Читать дальше: SVG карты

HTML тег map | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 23.01.2011

Тег <map> (с англ. карта) — тег-контейнер для создания карты-изображений.
Блочный элемент.

Тег <map> определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (<img>, <object>, <input>). Карта ассоциируется с элементом с помощью атрибута usemap. Тег <map> может использоваться без ассоциированного изображения для механизмов общей навигации.

Внутри контейнера <map> можно комбинировать:

  • один или более элементов <area>. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
  • содержимое уровня блока. Это содержимое должно включать <теги a>, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом

Если тег <map> имеет смешанное содержимое (и теги <area>, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы <area>.

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<map></map>

Атрибуты

Основные Вспомогательные События

class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
name имя карты изображения. Используется, как значение параметра usemap тега <img>
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка

Пример

код:

<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href=../../../manuals/html/tags/"#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href=../../../manuals/html/tags/"#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src=../../../manuals/html/tags/"map.png" alt="карта" usemap="#myMap"/>

Рекомендации по использованию

  • закрывающий тег обязателен (</map>)
  • атрибут id является обязательным
  • рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
  • не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами

Тег <area> — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.

Твой код:
<html> <head> <title></title> </head> <body> <div> <map name=»myMap»> <area alt=»тут ссылки нет» title=»тут ссылки нет» coords=»70,138,39″ shape=»circle» nohref=»nohref»/> <area alt=»Серая зона» title=»Серая зона» coords=»20,10,118,188″ shape=»rect» href=»#»/> <area alt=»Желтая зона» title=»Желтая зона» coords=»175,30,270,100,200,150″ shape=»poly» href=»#»/> </map> <img alt=»карта» src=»http://www.HTML-CSS-PHP-JS.RU/assets/images/html-tags/map.png» usemap=»#myMap» /> </div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *