2. Способ
Создание МАР-карты в Paint.
Для создания карты нам нужен всем знакомый и простой Paint и самый обыкновенный текстовый документ, с которым мы будем работать в блокноте.
В Paint'e нам пригодятся всего 2 инструмента: Карандаш и строка состояния
Скриншот 1
________________________________________________________________________________________________________
Создание квадратной кликабельной области
1.Основной код: Посмотрев скриншот 1 Вы заметили там три фигуры, различной формы, из этих фигур мы будем делать кликабельные области.
И первая, и одновременно самая простая область - квадратная.
Итак, создаем текстовый документ.
Открываем его и копируем туда следующее:
<img src="Адрес картинки, из которой будем делать карту" - вместо моих слов вставляете ссылку на нужную картинку, все просто.
border="0" - рамка вокруг картики. В данном коде стоит 0, поэтому рамка отсутствует. Вы же при желании можете поставить, например, 1, и тогда рамка появится. Чем больше число, тем толще рамка.
<area shape="rect" - данный параметр показывает, что мы создаем именно квадратную область, а не круглую или многоугольную.
В других примерах мы рассмотрим параметры для вышеназванных фигур.
coords="" - сюда мы будем вписывать координаты. Что это такое и для чего они нужны будет рассмотрено позже.
href="" - сюда мы будем вставлять ссылку, по которой Вы будете переходить, кликнув по размеченной области.
2. Получение координат: Открываем картинку, из которой будем делать карту, в Paint'e. Возьмите карандаш, и поводите им по рисунку (просто поводите мышкой, не рисуя), обратите внимание на строку состояния, в которой будут изменяться цифры в зависимости от положения карандаша на картинке.
Эти цифры - и есть координаты той точки, на которой Вы остановите карандаш. В случае с квадратной областью - нам нужно определить координаты 2-х точек, а именно левого верхнего и правого нижнего углов квадрата.
Скриншот 2
Наводим карандаш на левый верхний угол, и смотрим на панель состояния, в ней будут отображаться две цифры, для удобства запишите их куда-нибудь.
Затем повторяем ту же операцию и с правым нижним углом. В итоге у нас вышло 4 цифры-координаты (от 2-х углов по две цифры).
Теперь возвращаемся к коду, который был дан выше и ищем параметр coords="" и в кавычках и через запятую пишем получившиеся цифры.
Например:
Теперь в том же коде ищем параметр href="" и между кавычками вставляем ссылку, по который Вы будете переходить, щелкнув по размеченной области.
Например:
В итоге должен получится код типа:
Итак, карта готова (а если на карте нужно выделить несколько областей, то готова лишь часть карты )
Чтобы добавить еще областей,просто копируйте выделенную строку, и пишите их друг за другом между тегов <map name="Map"></map>:
<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>
________________________________________________________________________________________________________
Создание круглой кликабельной области
Теперь мы будем делать кликабельной фигуру №2, которая имеет форму круга.
Для нее нам потребуется определить координаты центра окружности и ее радиус.
Далее будет рассмотрено только получение координат, куда их прописывать, куда ставить ссылку и прочее было подробно рассмотрено в предыдущем примере, больше возвращаться к этому не будем.
Получение координат:
● Отрываем картинку в Paint, берем карандаш (а еще лучше кисть, чтобы можно было отметить действительно видимую точку) и на глаз определите середину круга, и оставьте там точку, она нам пригодиться
Скриншот 3
Координаты этой точки (наводим карандашом на точку, получаем две цифры) - координаты центра окружности.
● Теперь нам нужно определить радиус. Берем инструмент "Линия" и проводим линию от центра окружности к границе круга, при этом не отпуская кнопку мыши смотрим на цифры, получившиеся в строке состояния
Скриншот 4
Нам нужна вторая цифра, т.е. та, которая правее. Но прежде чем вписать ее в координаты, ее мысленно нужно умножить на два и затем уже получившееся число вписывать как радиус.
Итого в координаты круглой области мы должны записать три цифры: две - от точки в середине круга, и одну, представляющую из себя радиус.
Добавим в основной код нашей мар-карты строку, показывающую круглую область, и теперь он будет выглядеть так:
<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru">
<area shape="circle" coords="28,37,20" href="http://designfactory.hitbb.ru"></map>
● Важно: то, что выделено красным - форма области, нужно обязательно писать circle, чтобы было ясно, что это именно круглая область, а не квадратная или многоугольная.
________________________________________________________________________________________________________
Создание многоугольной кликабельной области
Теперь осталась последняя область - фигура №3, которая является многоугольником, т.е. имеет множество углов.
Получение координат: Для того, чтобы сделать многоугольную область кликабельной нужно определить координаты точек всех ее углов.
Т.е. наводим карандаш на каждый угол, и получаем с каждого угла по две цифры, чем больше углов, тем больше цифр получится соответственно.
В нашем случае шесть углов, с каждого угла по две цифры, итого - 12 цифр.
Скриншот 5
● Важно: В форме области нам теперь нужно указать, что это именно многоугольная область, поэтому параметр area shape будет выглядеть так:
В параметре coords как и раньше прописываем получившиеся координаты через запятую, и в параметре href указываем ссылку.
Добавим многоугольную область в наш общий код:
________________________________________________________________________________________________________
Все, мар-карта готова. Мы сделали кликабельными все три фигуры на рисунке. Чаще всего приходится работать с прямоугольными областями, но здесь были рассмотрены все варианты, на всякий случай 
Код мар-карты ставится в таком виде, в каком он представлен здесь, .т.е ничего из кода ничего не выкидываем.
Ставить можно абсолютно везде, начиная от HTML-верха, заканчивая формой ответа.
