Графическая карта ссылок (IMAP)

Автор: Николай Зыков (Exact)
http://rusforumz.com

Разрабатывая структуру сайта, часто сталкиваешься с ситуацией, когда необходимо использовать для гиперссылки какой-то небольшой участок единой картинки, не нарушая его структуры, конечно можно разрезать картинку в каком-нибудь графическом редакторе, на необходимые части и занести их в фиксированный табличный дизайн, конечно – это выход.

Но вы не учли, что в таком случае:

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

- На различных компьютерах такая структура может нарушиться и точный рисунок не отобразится в браузере, что очень сильно испортит впечатление от вашего сайта.

- А если вам нужно выделить в качестве гиперссылки, не прямоугольник, а другую область, как вы занесёте его в табличный дизайн?

- А что если прямоугольник настолько мал, что заносить его в таблицу просто глупость?

В общем, я не отговариваю вас от такого способа, у вас вполне всё может получиться, вот к примеру сайт RPG-игры http://gothic.ag.ru посмотрите на шапку этого сайта множество рисунков которые выглядят как единое целое и прекрасно соединяются в один рисунок.

Но для любой задачи можно найти альтернативный, более простой путь, в нашем случае – это IMAP или графическая карта ссылок. Как же использовать такую карту ссылок, разберём это по отдельным пунктам:

1. Добавляем дополнительный параметр usemap в тэг IMG, и присваиваем имя этому рисунку, например usemap=#karta.

2. Затем, можно далее, а можно и сразу после тэга IMG пишем контейнерный тэг MAP с параметром name, значение параметра – название нашего рисунка в данном случае name=karta, кстати не забывайте регист букв в названиях должны совпадать.

3.Внутри контейнера MAP вставляем тэг Area у этого тэга множество параметров, разберём самые распространенные.

Shape - форма выделения области гиперссылки, у этого параметра несколько известных мне значений: circle - круг в координатах указываются координаты центра и радиус, rect - прямоугольник указываются координаты верхнего левого и нижнего правого углов, poly - многоугольник указываются координаты всех углов.

Следующий праметр alt - действие аналогично, что и в тэге IMG, надпись появляющаяся при наведении на область.

coords - координаты x, y. У разных областей они указываются по разному. Координаты определённой точки в рисунке можно узать в простейшем графическом редакторе Paint в строке состояния. Также в этом параметре указывается радиус круга, при shape=circle.

href - адрес ссылки. Ну вот, вроде и всё, если какие-то параметры упустил, прошу пишите не Е-майл форума, всё исправлю
Графическую карту ссылок, можно использовать во многих ситуациях например, в логотипах, если честно всё зависит от вашего решения, так сказать от полёта дизайнерской мысли.

Если хотите увидеть на деле как действует IMAP прошу поводите по этому рисунку и подождите пока выйдет alt надпись, и убедитесь в практичном действии этой системы.