Карта изображений — это графический объект языка разметки HTML, связанный с изображением и содержащий специальные области (активные зоны), при нажатии на которые происходит переход по определённому (URL) (при помощи javascript можно установить другие действия). Использование карт изображений позволяет хранить несколько ссылок в одном изображении.
Для добавления карты изображений на Web-страницу используется парный HTML-тег <map>, в атрибуте name которого указывается уникальный в пределах документа идентификатор карты. Внутрь него добавляются непарные теги <area>, каждый из которых описывает одну активную зону. Затем в тег , который необходимо связать с картой, добавляется атрибут usemap, содержащий имя привязываемой карты. Значение атрибута должно начинаться со знака решётки. При этом в теге <img> должны быть явно указаны размеры изображения.
Карты изображения – это в принципе обыкновенные изображения , на которых определенная область является ссылкой , с помощью карт – изображения можно создавать навигационное меню .
Создадим три файла : главный файл test-kart.html , и два файла kart-chapter1.html и kart-chapter2.html которые будут загружаться при нажатии на карту-изображения .
Содержимое файла kart-chapter1.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Глава HTML</title>
</head>
<body>
<h1>Глава HTML</h1>
<p>Содержание главы HTML</p>
</body>
</html>Содержимое файла kart-chapter2.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Глава CSS</title>
</head>
<body>
<h1>Глава CSS</h1>
<p>Содержание главы CSS</p>
</body>
</html>Применение карт-изображений файл test-kart.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Применение карт-изображений</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Применение карт-изображений</h1>
<img src="foto.png" alt="Подсказка" width="225" height="225"
usemap="#karta" style="border: black 1px solid">
<iframe src="chapter1.html" name="chapter" width="100%" height="200">
<p>Ваш Web-браузер не отображает фреймы</p>
</iframe>
<map name="karta">
<area shape="rect" coords="0,0,225,112" href="kart-chapter1.html"
target="chapter" alt="Глава HTML">
<area shape="rect" coords="0,112,225,225" href="kart-chapter2.html"
target="chapter" alt="Глава CSS">
<area shape="default" alt="nohref">
</map>
</body>
</html>Применение карт-изображений
При загрузке файла , мы увидим загруженный фрейм chapter1.html с главой 1 , при нажатии клавишей мышки на верхнею часть изображения загрузиться фрейм kart-chapter1.html с главой HTML :
Фрейм kart-chapter1.html с главой HTML
А при нажатии на нижнею часть изображения загрузиться фрейм kart-chapter2.html с главой CSS , при этом области на изображение будут выделены рамкой .
Фрейм kart-chapter2.html с главой HTML
Структура карт-изображений
С помощью тега <img> вставляет изображение в Web – страницу .
Атрибут usemap - указывает , что изображение является картой . В качестве значений атрибут указывает URL – адрес описания конфигурации.
Если описание расположено в том же HTML – документе , то указывается название раздела конфигурации карты , перед которым добавляется символ (#).
Вторая часть , является описанием конфигурации карты , расположена между тегами <map> и </map> . Активная область карты описывается с помощью тега <area> . Сколько на карте активных областей , столько и тегов <area> должно быть .
<map name="karta">
<area shape="rect" coords="0,0,225,112" href="kart-chapter1.html"
target="chapter" alt="Глава HTML">
<area shape="rect" coords="0,112,225,225" href="kart-chapter2.html"
target="chapter" alt="Глава CSS">
<area shape="default" alt="nohref">
</map>Тег <map>
Парный тег <map> служит для описаний конфигурации областей карты — изображений . У тега <map> есть единственный атрибут - name . Значение атрибута name должно соответствовать имени в атрибуте usemap тега <img> .
Тег <area> описывает одну активную область на карте . Закрывающий тег не требуется . Если одна активная область перекрывает другую , то будет реализована первая ссылка из списка областей .
Атрибуты тега <area>
shape – Задает форму активной области . Он может принимать 4 Значения :
rect – Активная область в форме прямоугольника ( значения по умолчанию ):
<area shape="rect" alt="Подсказка">shape – Задает форму активной области . Он может принимать 4 Значения :
circle - Активная область в форме круга :
<area shape="circle" alt="Подсказка">poly - Активная область в форме многоугольника :
<area shape="poly" alt="Подсказка">default - Активная область занимает всю площадь изображения . Данное значение не поддерживается Internet Explorer :
<area shape="default" alt="Подсказка"><area shape="default" alt="Подсказка" href="chapter.html">coords - Определяет координаты точек отдельной активной области . Координаты указывают относительно верхнего левого угла изображения и задаются следующим образом :
Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника ( координаты указываются через запятую ) :
<area shape="rect" coords="x1, y1, x2, y2" alt="Подсказка">Здесь x1 , и y1 ,- координаты верхнего левого угла , а x2 и y2 — координаты правого нижнего угла , например :
<area shape="rect" coords="0, 0, 120, 120" alt="Подсказка"><area shape="rect" coords="0, 0, 120, 120" alt="Подсказка" href="chapter.html">Для области типа circle — указываются координаты центра круга и радиус :
<area shape="circle" coords="x1, y1, r1" alt="Подсказка">Здесь x1 , и y1 , - координаты центра круга , а r1 – радиус круга , например :
<area shape="circle" coords="0,60,30" alt="Подсказка" href="chapter.html">Для области poly перечисляются координаты вершин многоугольника в нужном порядке :
<area shape="poly" coords="x1, y1, x2, y2, x3, y3" alt="Подсказка" href="chapter.html">Здесь x1 , y1 , x2 , y2 , x3, y3 — координаты вершин многоугольника ( в данном случае треугольника ) . Можно задавать и большое количество вершин , иными словами , можно описать активную область практически любой формы . Координаты последней вершины не обязательно должны совпадать с первой :
<area shape="poly" coords="10, 100, 60, 10, 100, 100" alt="Подсказка"><area shape="poly" coords="10, 100, 60, 10, 100, 100" alt="Подсказка" href="chapter.html">href – указывает URL – адрес ссылки . Может указан абсолютный и относительный адрес ссылки :
<area shape="circle" coords="0,60,30" alt="Подсказка" href="http://www.mysite.ru/chapter.html#34;><area shape="circle" coords="0,60,30" alt="Подсказка" href="chapter.html">nohref – указывает , что активная область не имеет ссылки . А используется для исключения другой части области :
<area shape="circle" coords="0,60,30" alt="Подсказка" nohref>alt - Задает текст всплывающей подсказки при наведении курсора мыши на активную область :
<area shape="rect" coords="0, 0, 120, 120" alt="Всплывающая подсказка" href="chapter.html">target – Указывает , куда будет загружен документ при переходе по ссылке . Может быть указано имя фрейма или одно из зарезервированных значений - _blank , _self или _parent :
<area shape="rect" coords="0, 0, 240, 240" href="chapter.html" target="_blank" alt="Подсказка"><area shape="rect" coords="0, 0, 240, 240" href="chapter.html" target="_blank" alt="Подсказка" title="Глава 1">