Если в качестве ссылки используется изображение, и если щелкнуть по разным фрагментам рисунка, то загружаются различные web-документы.

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

Если в качестве ссылки используется изображение, и если щелкнуть по разным фрагментам рисунка, то загружаются различные web-документы.

Создание изображения-карты происходит в несколько шагов:

1. Поиск и подбор подходящего изображения;

2. Разбиение изображения на фрагменты;

3. Создание необходимых html-файлов для ссылок по фрагментам;

4. Ввод необходимых тегов для описания фрагментов.

Вставка изображения-карты осуществляется с помощью тега вставки рисунка <IMG>, и ключевых слов:

Ключевое слово	Величина	Значение
src=	имя файла	Имя файла, содержащего изображение
usemap=	“#название”	информация о том, что изображение является изображением-картой

Для описания фрагментов используется теги <MAP> и </MAP>, также тег <AREA> и ключевые слова shape, coords и href:

Ключевое слово	Величина	Значение
shape=	имя	название фрагмента
	rect	прямоугольник
coords=	“координаты”	указываются координаты левого верхнего и правого нижнего углов прямоугольника (через запятую)
	circle	окружность
coords =	“координаты”	указываются координаты центра окружности и радиус (через запятую)
	poly	многоугольник
coords =	“координаты”	указываются координаты вершин многоугольника (через запятую), причем координаты первой и последней точек должны совпадать, для обеспечения замкнутого контура
href=	имя файла	имя html-файла, на который осуществляется ссылка

Например,

прямоугольный фрагмент:

<AREA	shape=	rect	coords=	“0,0,50,100”	href=	f1.htm	>
	↑	↑	↑	↑	↑	↑
	ключевое слово	название фрагмента	ключевое слово	координаты	ключевое слово	имя файла

фрагмент-окружность:

<AREA	shape=	circle	coords=	“50,1100,25”	href=	f2.htm	>
	↑	↑	↑	↑	↑	↑
	ключевое слово	назв. фрагмента	ключевое слово	координаты	ключевое слово	имя файла

многоугольный фрагмент:

<AREA	shape =	poly	coords=	“0,0,50,100,1,1,0,0”	href=	f3.htm	>
	↑	↑	↑	↑	↑	↑
	ключевое слово	назв. фрагм.	ключевое слово	координаты	ключевое слово	имя файла

Для сложных деталей рисунка можно комбинировать описание фрагментов. В случае перекрывающихся фрагментов переход осуществляется по фрагменту, описанному первым в списке.

Задание для самостоятельной работы

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

- подобрать подходящий рисунок для работы с изображением-картой;

- разбить изображение-карту на фрагменты, каждого типа фрагментов не менее трех;

- предусмотреть фрагмент – все оставшееся поле рисунка;

- создать отдельные файлы – web-документы для каждого фрагмента изображения-карты;

- создать ссылки на фрагменты карты, предусмотреть обратный переход.

Дата добавления: 2015-08-28