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

    <img src="Адрес картинки, из которой будем делать карту" border="0" usemap="#Map" />
    <map name="Map"><area shape="rect" coords="" href=""></map>

<img src="Адрес картинки, из которой будем делать карту" - вместо моих слов вставляете ссылку на нужную картинку, все просто.
border="0" - рамка вокруг картики. В данном коде стоит 0, поэтому рамка отсутствует. Вы же при желании можете поставить, например, 1, и тогда рамка появится. Чем больше число, тем толще рамка.
<area shape="rect" - данный параметр показывает, что мы создаем именно квадратную область, а не круглую или многоугольную.
В других примерах мы рассмотрим параметры для вышеназванных фигур.
coords="" - сюда мы будем вписывать координаты. Что это такое и для чего они нужны будет рассмотрено позже.
href="" - сюда мы будем вставлять ссылку, по которой Вы будете переходить, кликнув по размеченной области.

2. Получение координат: Открываем картинку, из которой будем делать карту, в Paint'e. Возьмите карандаш, и поводите им по рисунку (просто поводите мышкой, не рисуя), обратите внимание на строку состояния, в которой будут изменяться цифры в зависимости от положения карандаша на картинке.
Эти цифры - и есть координаты той точки, на которой Вы остановите карандаш. В случае с квадратной областью - нам нужно определить координаты 2-х точек, а именно левого верхнего и правого нижнего углов квадрата. (см. скриншот №2)
Наводим карандаш на левый верхний угол, и смотрим на панель состояния, в ней будут отображаться две цифры, для удобства запишите их куда-нибудь.
Затем повторяем ту же операцию и с правым нижним углом. В итоге у нас вышло 4 цифры-координаты (от 2-х углов по две цифры).
Теперь возвращаемся к коду, который был дан выше и ищем параметр coords="" и в кавычках и через запятую пишем получившиеся цифры.
Например:

    coords="78,85,157,242"

Теперь в том же коде ищем параметр href="" и между кавычками вставляем ссылку, по который Вы будете переходить, щелкнув по размеченной области.
Например:

    href="http://spybb.ru"

В итоге должен получится код типа:

    <img src="http://адрес картинки" border="0" usemap="#Map" />
    <map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>

Итак, карта готова (а если на карте нужно выделить несколько областей, то готова лишь часть карты smile )
Чтобы добавить еще областей,просто копируйте выделенную строку, и пишите их друг за другом между тегов <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>

©???

Отредактировано Usagi (2009-12-16 09:43:45)