Навигационные карты

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих " кнопок" переходил по ссылке в тот или документ.. что нам для этого нужно?

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега < img> (я думаю Вам не стоит напоминать о том что тег < img> имеет обязательный атрибут src который указывает путь к той или иной картинке < img src=" knopki.jpg" >)

Назовём наш рисунок/карту именем panel. Это будет выглядеть так:

< img src=" knopki.jpg" usemap=" #panel" >

Не забываем по правилам синтаксиса поставить знак # решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом < map> у которого есть атрибут name - имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

< map name=" panel" >
< /map>

Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег < area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:

href - указывает путь к открываемому документу (точно так же как в теге < a>)
shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

· rect - прямоугольная область

· poly - область представляет собой некий многоугольник

· circle - область заданная окружностью

coords - координаты формы