Back to top

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

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

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

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

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

Для создания подобных карт ссылок, помимо тега 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 создает мертвую зону на карте ссылок.

2 сентября 2015 г.