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

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

Четыре геометрические фигуры

Создание карт изображений

Для создания подобных карт ссылок, помимо тега img используются еще два тега, а именно тег map (от англ. map — карта) и тег area (от англ. area — область). Тег map определяет границы описания карты ссылок, а вложенные в него теги area описывают каждую активную область.

Пример карты изображений

<img src="shapes.png" alt="Четыре геометрические фигуры"
  width="600" height="150" usemap="#shapes" />

<map name="shapes">
  <area атрибуты />
</map>

Связь между тегом img и соответствующей картой ссылок, т. е. тегом map, устанавливается с помощью атрибутов usemap и name. В атрибуте name тега map указывается произвольное уникальное название карты, например, shapes, и это же название должно быть использовано в атрибуте usemap соответствующего тега img. Обратите внимание на обязательный символ решетки.

Границы активных областей изображения и адреса ссылок указываются с помощью тега area и его атрибутов shape (т. е. форма), coords (координаты) и href (гиперссылка). Например, для задания ссылки при клике на круг, можно использовать следующую запись:

<area shape="circle" coords="200,75,50" href="circle.html" />

Здесь circle (от англ. круг) – это одно возможных значений атрибута shape, которое задает активную область в виде круга, а числа в атрибуте coords — это, соответственно, расстояние от левого края изображения до центра круга (200 пикселей), расстояние от верхнего края изображения до его центра (75 пикселей) и радиус круга (50 пикселей).

Помимо круга с помощью атрибута shape тега area можно задать прямоугольник и многоугольник. Им соответствуют значения атрибута shape: rect (от англ. rectangle – прямоугольник) и poly.

<area shape="rect" coords="25,25,125,125" href="square.html" />
<area shape="poly" coords="325,25,262,125,388,125" href="triangle.html" />

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

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

Мертвые зоны

Полный код карты ссылок для изображения с четырьмя геометрическими фигурами выглядит следующим образом.

<img src="shapes.png" alt="Четыре геометрические фигуры"
  width="600" height="150" usemap="#shapes" />

<map name="shapes">
  <area shape="rect" coords="50,50,100,100" /> <!-- "мертвая" зона -->
  <area shape="rect" coords="25,25,125,125" href="square.html" />
  <area shape="circle" coords="200,75,50" href="circle.html" />
  <area shape="poly" coords="325,25,262,125,388,125" href="triangle.html" />
  <area shape="poly" href="star.html"
    coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" />
</map>

Нам осталось отметить только то, что для создания «мертвой», т. е. некликабельной зоны внутри квадрата, используется тег area без атрибута href. Гиперссылка не указана, и значит данный тег area создает мертвую зону на карте ссылок.

Карты изображений (от англ. image map) или как их еще называют карты ссылок, позволяют привязать гиперссылки к различным частям одного изображения, созданного с помощью тега img.