Основы работы с HTML


Карты изображений, обрабатываемые браузером


Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута 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>




Начало  Назад  Вперед



Книжный магазин