взято с http://help.mybb.ru/

Создание МАР-карты в Paint.
(с) Айрин
Данный FAQ предназначен для тех, у кого по каким-то причинам нет специальных программ для создания MAP-карт, а создавать карты очень хочется
Для создания карты нам нужен всем знакомый и простой Paint и самый обыкновенный текстовый документ, с которым мы будем работать в блокноте.
В Paint'e нам пригодятся всего 2 инструмента:
Карандаш и строка состояния (см. http://i029.radikal.ru/0809/44/1a1142815401.png  скриншот №1)
________________________________________

Создание квадратной кликабельной области
1. Основной код: Посмотрев скриншот номер №1 Вы заметили там три фигуры, различной формы, из этих фигур мы будем делать кликабельные области.
И первая, и одновременно самая простая область - квадратная.
Итак, создаем текстовый документ. Открываем его и копируем туда следующее:

<img src="Адрес картинки, из которой будем делать карту" - вместо моих слов вставляете ссылку на нужную картинку, все просто.
border="0" - рамка вокруг картики. В данном коде стоит 0, поэтому рамка отсутствует. Вы же при желании можете поставить, например, 1, и тогда рамка появится. Чем больше число, тем толще рамка.
<area shape="rect" - данный параметр показывает, что мы создаем именно квадратную область, а не круглую или многоугольную.
В других примерах мы рассмотрим параметры для вышеназванных фигур.
coords="" - сюда мы будем вписывать координаты. Что это такое и для чего они нужны будет рассмотрено позже.
href="" - сюда мы будем вставлять ссылку, по которой Вы будете переходить, кликнув по размеченной области.
2. Получение координат: Открываем картинку, из которой будем делать карту, в Paint'e. Возьмите карандаш, и поводите им по рисунку (просто поводите мышкой, не рисуя), обратите внимание на строку состояния, в которой будут изменяться цифры в зависимости от положения карандаша на картинке.
Эти цифры - и есть координаты той точки, на которой Вы остановите карандаш. В случае с квадратной областью - нам нужно определить координаты 2-х точек, а именно левого верхнего и правого нижнего углов квадрата. (см http://s47.radikal.ru/i115/0809/16/7fe06e1f60ac.png . скриншот №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, берем карандаш (а еще лучше кисть, чтобы можно было отметить действительно видимую точку) и на глаз определите середину круга, и оставьте там точку, она нам пригодиться (См. http://s56.radikal.ru/i151/0809/14/cd171bac70a5.png   скриншот №3)
Координаты этой точки (наводим карандашом на точку, получаем две цифры) - координаты центра окружности.
● Теперь нам нужно определить радиус. Берем инструмент "Линия" и проводим линию от центра окружности к границе круга, при этом не отпуская кнопку мыши смотрим на цифры, получившиеся в строке состояния (см http://s41.radikal.ru/i093/0809/ca/d2628ee12947.png  . скриншот №4)
Нам нужна вторая цифра, т.е. та, которая правее. Но прежде чем вписать ее в координаты, ее мысленно нужно умножить на два и затем уже получившееся число вписывать как радиус.
Итого в координаты круглой области мы должны записать три цифры: две - от точки в середине круга, и одну, представляющую из себя радиус.
Добавим в основной код нашей мар-карты строку, показывающую круглую область, и теперь он будет выглядеть так:

<area shape="circle" coords="28,37,20" href="http://mybb.ru"></map>
● Важно: то, что выделено красным - форма области, нужно обязательно писать circle, чтобы было ясно, что это именно круглая область, а не квадратная или многоугольная.
________________________________________

Создание многоугольной кликабельной области
Теперь осталась последняя область - фигура №3, которая является многоугольником, т.е. имеет множество углов.
Получение координат: Для того, чтобы сделать многоугольную область кликабельной нужно определить координаты точек всех ее углов.
Т.е. наводим карандаш на каждый угол, и получаем с каждого угла по две цифры, чем больше углов, тем больше цифр получится соответственно.
В нашем случае шесть углов, с каждого угла по две цифры, итого - 12 цифр. (см. http://s56.radikal.ru/i154/0809/7a/4f9b49f3a87f.png  скриншот №5)
● Важно: В форме области нам теперь нужно указать, что это именно многоугольная область, поэтому параметр area shape будет выглядеть так:

В параметре coords как и раньше прописываем получившиеся координаты через запятую, и в параметре href указываем ссылку.
Добавим многоугольную область в наш общий код:

________________________________________

Все, мар-карта готова. Мы сделали кликабельными все три фигуры на рисунке. Чаще всего приходится работать с прямоугольными областями, но здесь были рассмотрены все варианты, на всякий случай
Код мар-карты ставится в таком виде, в каком он представлен здесь, .т.е ничего из кода ничего не выкидываем.
Ставить можно абсолютно везде, начиная от HTML-верха, заканчивая формой ответа.

Отредактировано Каркуша (23-02-2009 21:58:32)