Сегментированные графические изображения - ссылки

С помощью тега <IMG> можно создавать графические изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называют сегментированными изображениями, или картами.

Конфигурацию карты определяеттег <MAP>.. </MAP>.

Этот элемент необходим для общего определения карты. Тег <MAP> имеет атрибут, задающий имя карты: name= ‘’Имя’’.

Между тегами <MAP> и </MAP> определяются области карты при помощи тега <AREA>. Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Тег <AREA> должен включать следующие атрибуты:

href= ‘’Адрес ссылки’’ - определяет ссылку (эквивалентен атрибуту href в теге <A>).

alt= ‘’Текст подсказки’’ - задает текст, заменяющий изображение карты, если оно не может быть выведено. Является необязательным.

Форму области на карте определяет обязательный атрибут shape, а обязательный атрибут coords задает координаты этой области.

Существует три стандартных вида областей:

1.Круг: shape=’’circle’’ coords=X,Y,R.

Здесь X и Y - координаты центра круга, а R - радиус, выраженные в пикселах. Координаты центра отсчитываются от левого верхнего угла рисунка, на который накладывается карта.

2.Прямоугольник: shape=’’rect’’ coords=X1,Y1,X2,Y2.

Здесь X1 и Y1 - координаты левого верхнего, а X2 и Y2 - правого нижнего угла прямоугольника (в пикселах).

3.Многоугольник: shape=’’poly’’ coords=X1,Y1,X2,Y2,..XN,YN,

где (X1,Y1), (X2,Y2),..(XN,YN) - координаты каждого из углов многоугольника.

После того, как карта описана в теле HTML - документа (в любом месте после тега <BODY>), её можно использовать в теге <IMG> с помощью атрибута usemap: usemap= ‘’# Имя’’. Это имя должно соответствовать значению атрибута name в теге <MAP>.
В качестве значения параметра src в теге <IMG> указывается имя и, если это необходимо, путь к файлу графического изображения, на которое накладывается карта:

<IMG src=’’pict1.gif’’ usemap=’’#karta1’’ alt=’’ Карта № 1’’>

Приведем пример HTML - документа, содержащего в себе карту двух областей разной формы:

<HTML>

<HEAD>

<TITLE> Лабораторная работа № 4 </title>

</head>

<BODY bgcolor=’’#FFFFFF’’ text=’’#000000’’ link=’’#0000FF’’

vlink=‘’#FF0000’’>

<CENTER> <H2> Пример карты </h2> </center>

<AREA alt = ’’ Круг’’ shape = ’’circle’’ coords=’’119,114,83’’

href=’’http://www.sstu.runnet.ru’’>

<AREA alt =’’ Многоугольник’’ shape =’’poly’’