Я обещала в посте с дизайном рассказать, как делать такую карту. В принципе все очень просто. Достаточно выучить простой html-алгоритм, описывающий координаты ваших ссылок на изображении и всё это дело загрузить в эпиграф.

 

Возьмем изображение, например:

 

 %)

 

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

Жмем правой кнопой мыши по ссылке в вашем дневнике "стать пч" или "в друзья" над аватаром

 

[160x236]

 

В открывшемся окне выбираем "свойства" и копируем оттуда url. (так же и с любыми другими ссылками)

Дальше идем в настройки эпиграфа. Закачиваем туда картинку, всё как обычно.

И тут начинается самое интересное, надо прописать html-код, чтобы ссылка работала.

 

Алгоритм такой:

в котором:

Первая с строка - это прописка закаченного изображения, ее мы не трогаем на протяжении всех действий.  

 

Map_example.jpg - ссылка на ваше загруженное в эпиграф изображение

 

SHAPE - форма ссылки, то есть:

      RECT - прямоугольник
      CIRCLE - круг
      POLY - многоугольник
      DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.

 

COORDS - Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
      RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
      CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
      POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).

 

TITLE - Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

 

HREF - сюда мы помещаем ссылку, которую предварительно скопировали (http://www.liveinternet.ru/member2.php?action=addl...=2022652&userownid=2022652)

 

Самое сложное - это рассчитывать координаты ваших ссылок. Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit.

 

С помощью этой программы я получила координаты и вставляю их в мой html-код. Что получилось у меня:

Первые две строчки это описание нашего закаченного изображения, мы его не трогали на протяжении всех манипуляций с html-кодом. Теперь нам нужно скопировать адрес изображения из этой строки http://img0.liveinternet.ru/images/attach/b/3/15/735/15735849_1201163944_primer и вставить его вместо Map_example нашего примера (не забывайте про кавычки, они обязательны).

Вставляем полученный код в эпиграф при включенной кнопке "Источник".

Результат: