Лабораторная работа № 3. Создание и использование графической карты
Графическое изображение, помещаемое в HTML-документ при помощи метки <IMG> можно разметить так, что его отдельные участки окажутся связанными внешними гиперссылками с другими HTML-документами или, в общем случае, с любыми доступными ресурсами (текстовыми и графическими файлами, звуковыми и видеофрагментами и т.д.).
Описание карты состоит из двух частей. Первая часть начинается и заканчивается метками < MAP NAME = ”имя_карты”> и </ MAP>. Здесь имя_карты – произвольная комбинация букв и цифр, имя данной карты. Между этими метками ставятся метки <AREA>, столько раз, сколько фрагментов надо выделить в изображении. Метки <AREA> содержат параметры, определяющие форму фрагмента, координаты опорных точек, адрес гиперссылки, а также, при необходимости, параметр, определяющий куда, в какое окно, надо вывести документ, на который ссылается данный фрагмент:
SHAPE = ”тип_области”, где тип_области может принимать одно из трех значений: RECT, CIRC или POLY (ПРЯМОУГОЛЬНИК, КРУГ или МНОГОУГОЛЬНИК соответственно).
COORDS = ”список_координат”, где список_координат – числа, разделенные запятыми – экранные координаты опорных точек области (в пикселах, горизонтальная координата отсчитывается от левого края рисунка, вертикальная – от верхнего). Для прямоугольника опорными точками являются левый верхний угол и правый нижний, для круга – его центр и радиус, для многоугольника – все его угловые точки, последовательно по или против часовой стрелки.
HREF = ”адрес”, где адрес – адрес ресурса, на который ссылается данный фрагмент. Это может быть либо URL-адрес страницы Интернета, либо имя файла на диске. Если по каким-то причинам данный фрагмент не нужно ни с чем связывать, вместо параметра HREF используется NOHREF, указывающий, что ссылка отсутствует.
TARGET = ”имя_окна_фрейма” – данный параметр используется в том случае, если документ имеет фреймовую структуру и надо указать, в какое окно нужно направить документ, на который ссылается данный фрагмент. Создание и использование фреймов рассматривается в следующей работе № 4.
Вторая часть описания начинается меткой <IMG>и содержит следующие параметры:
SRC = ”имя_файла”, где имя_файла – имя графического файла;
WIDTH = ”число”, где число – ширина изображения в пикселах;
HEIHT = ”число”, где число – высота изображения в пикселах;
BORDER = ”число”, где число – толщина линии рамки в пикселах (необязательный параметр);
USEMAP = ”# имя_карты ”, где имя_карты – имя, указанное как параметр метки <MAP>.
В качестве примера рассмотрим разметку фотографии, содержащую только один фрагмент (см. рис.11).
Рис.11. Пример разметки графической карты.
Разметку можно делать разными способами. Первый, самый простой – определять координаты опорных точек «на глаз», имея ввиду, что первая координата точки – это расстояние ее от левого края рисунка, а вторая – расстояние от верхнего края, в пикселах. Поскольку ширина и высота рисунка заданы (как параметры метки <IMG>), то нетрудно приблизительно оценить оба размера (можно воспользоваться линейкой, измерив ширину и высоту рисунка, затем расстояния от левого и верхнего края до опорной точки и составить пропорцию, пересчитав все в пикселах). В дальнейшем можно уточнить координаты, проверяя при просмотре форму области, чувствительную к курсору. Еще один способ – воспользоваться каким-либо графическим редактором, например редактором Paint. Координаты курсора в пикселах отображаются в нижней строке редактора.
Ниже дано описание графической карты с разметкой, представленной на рис.11.
<HTML>
<HEAD>
<TITLE> Графическая карта </TITLE>
</HEAD>
<BODY>
<MAP NAME = "map1">
<AREA SHAPE = “POLY”
COORDS = “105, 57 ,115 , 57, 116, 71 ,126, 86, 122, 114,
123, 169, 107, 166, 103, 91, 100, 78”
HREF = “text2.htm”>
<!………….
………. Здесь могут быть метки AREA описания других фрагментов
………….>
</MAP>
<IMG SRC="Photo.jpg" WIDTH="300" HIGTH="220"
USEMAP = "# map1">
</BODY>
</HTML>
Примечание. Графической карте здесь присвоено имя map1. В метке <AREA> после указания формы области (POLY – “многоугольник”) и списка координат опорных точек (COORDS) приведена ссылка на документ text2.htm. Аналогично выглядят описания других фрагментов графической карты.