HTML Карты-изображения
Карта изображений — это графический объект языка разметки HTML, связанный с изображением и содержащий специальные области (активные зоны), при нажатии на которые происходит переход по определённому URL адресу (при помощи javascript можно установить другие действия). Использование карт изображений позволяет хранить несколько ссылок в одном изображении.
Для добавления карты изображений на Web-страницу используется парный HTML-тег <map>, в атрибуте name которого указывается уникальный в пределах документа идентификатор карты. Внутрь него добавляются непарные теги <area>, каждый из которых описывает одну активную зону. Затем в тег <img>, который необходимо связать с картой, добавляется атрибут 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 – документе, то указывается название раздела конфигурации карты, перед которым добавляется символ (#).
<img src="foto.gif" alt="Подсказка" width="225" height="225"
usemap="#karta" style="border: black 2px solid">Вторая часть, является описанием конфигурации карты, расположена между тегами <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 перечисляются координаты вершин многоугольника в нужном порядке:
Здесь 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">Рекомендуемые материалы
Спецификации