Главная :: Учебник HTML :: Изображение-карта

Изображение-карта

С помощью изображения-карты можно превратить различные части изображения в гиперссылки. На приведенном изображении, каждой иконке соответствует своя ссылка. Рассмотрим, как это реализуется:

Подробно рассмотрим приведенный выше пример. Для начала задает графическое изображение с помощью тега IMG. Отличительной особенностью от обычного изображение является наличие свойства usemap имеющего значение-ссылку на карту ссылок. В нашем случае имя карты #img_map и оно обязательно начинается с символа решетка (#). Теперь нужно задать карту ссылок с помощью тега map и его свойства name имеющего значение определенное в теге IMG, но уже без символа решетки (в нашем примере img_map). Каждая ссылка задается с помощью тега area (свойство href) внутри элемента map. Область изображения, служащая гиперссылкой задается свойством coords (координаты), а форма определяется свойством shape.

Приведем таблицу значений свойств тега area:

Свойство	Описание
ALT	Альтернативный текст, появляющийся при невозможности загрузить изображение.
COORDS	Определяет размер и положение области. Задается в пикселях и отсчитывается от левого верхнего угла изображения. В зависимости от значения свойства SHAPE может принимать следующие наборы значений: RECT: X1, Y1, X2, Y2, где X1, Y1 - координата левого верхнего угла изображения, а X2, Y2 - правого нижнего угла. CIRCLE: X, Y, R - координаты цента и радиус круга. POLY: X1, Y1, X2, Y2, ..., XN, YN - список координат многоугольника.
NOHREF	Показывает, что данная область не является гиперссылкой. Совместно с другими областями позволяет задавать сложные области для гиперссылки (напрмер полукруг, кольцо и т.д.).
SHAPE	Определяет форму области и может принимать следующие наборы значений: RECT - прямоугольник; CIRCLE - круг; POLY - многоугольник; DEFAULT - вся облась (рисунок) является гиперссылкой.
TARGER	Определяет параметры открытия гиперссылки: _top, _blank, _self, _parent. Описание этих параметров можно посмотреть здесь.
TITLE	Текст всплывающей подсказки.