ГРУППА КУРСА
|
Главная >
Учебник HTML >
Карта изображенияКарта изображения создаёт на изображении одну или несколько областей, которые являются ссылками. Вот пример такого изображения: ![]() Нажмите на определённую часть картинки и Вы перейдёте на соответствующий сайт. Карта изображения создаётся при помощи тега <map>. У него должен быть атрибут name, который задаёт имя карты. А у тега <img> должен быть атрибут usemap. Его значение совпадает с именем карты, только в начале идёт знак #. Таким образом изображение связывается с определённой картой. Для примера сделаем такое изображение, как на этой странице. Добавим на страницу картинку и создадим для неё карту. +
Внутри тега <map> должны находиться теги <area>. Они определяют области, которые становятся ссылками. Для указания области у этих тегов есть атрибут shape. Он устанавливает форму области. shape="rect" - прямоугольник shape="circle" - круг shape="poly" - многоугольник shape="default" - всё изображение Кроме формы области указываются её координаты при помощи атрибута coord. Координаты указываются в пикселях и отсчитываются от левого верхнего угла изображения. Они перечисляются через запятую. Для каждой формы области координаты определяются по-разному. Для прямоугольника нужно указать два угла:
X первого угла, Y первого угла, X второго, Y второго Для круга указываются координаты центра и радиус: X центра, Y центра, радиус Для многоугольника нужно перечислить координаты всех углов: X1, Y1, X2, Y2Кроме рассмотренных атрибутов, тег <area> имеет те же атрибуты, что и тег <a>. Прежде всего, атрибут href, указывающий URL, на который нужно перейти. В примере сделаем одну круглую область и одну прямоугольную. Для этого добавим в тег <map> такой код:
Области на карте изображения могут пересекаться. Выше будет та область, которая идёт раньше в коде страницы. |