Карты изображений, обрабатываемые браузером
Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:
<img src="figure_1.png" usemap="#coordinates">
Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов <map> и <area>.
Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.
Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" - прямоугольник. Также область может быть описана в форме окружности (shape="circle") или многоугольника (shape="poly").
Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются координаты вершин многоугольника.
Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.
Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map>-</map>.
В следующем примере задана карта изображений, на которой в соответствии с изображением выделены прямоугольная, круглая и треугольная координатная области.
<html> <body> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" usemap="#coordinates"> <map name="coordinates"> <area coords="130,194,270,130" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="73,90,40" href="circle.html" alt="Круг"> <area shape="poly" coords="168,109,280,109,223,13" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
Для корректной работы следующего примера необходимо создать в рабочей папке файлы rect.html, circle.html, polygon.html. Например, файл rect.html:
<html> <body> Вы выбрали прямоугольник </body> </html>
Обратите внимание, что атрибут alt (заменяющий текст) может использоваться как для всего изображения, так и для каждой его области.
В следующем примере координатные области пересекаются, обратите внимание, что для карт изображений действует принцип, согласно которому при пересечении двух или более координатных областей активной будет область, описанная первой. В данном примере есть определенное несоответствие, при щелчке мышью на окружности в области пересечения ее с прямоугольником загрузиться файл rect.html.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
В следующем примере порядок описания координатных областей приведен в соответствие с изображением на экране.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> </map> </body> </html>
Пример выполнения данного HTML-кода
