В предыдущем посте "Создание карты (map) для ссылок в Photoshop" я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы. Если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела "Уроки Photoshop"
 

Для того, чтобы картинка заработала, я написал HTML-код: 

<img width="640" height="367" alt="" src="//s45.radikal.ru/i110/0901/5b/f02c73a3cd94.jpg" usemap="#picture" border="0" />
<map name="picture">
<area target="_blank" href="http://bravedefender.ru/profile/" shape="rect" coords="235,61,472,117" />
<area target="_blank" href="http://bravedefender.ru/blog" shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
<area target="_blank" href="http://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323" shape="circle" coords="551,198,65" /></map>

Этот код можно вставить в поле сообщения (при нажатой кнопочке "Источник") или в эпиграф…

Посты по теме:

• Что такое HTML
   
• HTML-код рисунков
   
• Картинка-ссылка

1. Координаты

Чтобы составить указанный код, немного вспомнил геометрию :)



Система координат: ось X - сверху вниз, ось Y - слева направо
Для задания координат фигуры нужно установить:
- квадрат (или прямоугольник), стороны которого параллельны осям - координаты двух противоположных углов - X1, Y1 и X2, Y2
- многоугольник - координаты ВСЕХ углов
- круг - координаты центра и радиус.

В моем случае, выходит, нужны координаты точек A,C - для ссылки "Профиль" (прямоугольник), точек D,E,F,G,H - для ссылки "Дневник" (многоугольник), Q и длина R - для ссылки "Уроки Photoshop" (круг). Все эти числа в HTML-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)


Необходимости в особой точности нет, поэтому определить координаты можно выяснить с помощью "линейки" в Photoshop - для ее вызова нажимаю Ctrl + R
Мне было интереснее, чтобы кто-то другой посчитал координаты. Для этого запускаю MS Paint (Пуск - Все программы - Стандартные - Paint) и открываю в нем рисунок. При наведении курсора на искомые точки в нижней панели появляются их координаты, которые старательно записываю



2. HTML-код

Навигационные карты задаются тэгом <map></map>.
Тэг map включает себя тэги <area>, которые определяют геометрические области карты-рисунка и связанные с ними ссылки.
Разобрался я так - для создания навигационной карты нужны:
- теги с описанием изображения
<img width="ширина изображения" height="высота изображения" alt="" src="http-адрес изображения" usemap="#имя карты" />
- теги карты
<map name="имя карты">
</map>
- теги областей
<area target="_blank(ссылка открывается в новой закладке)" href="http-адрес ссылки" shape="форма области (rect - прямоугольник, poly - многоугольник, circle - круг)" coords="координаты точек фигуры" />

В моем случае, значения оказались такими:
 

• width="640" height="367" - размеры изображения
• src="//s45.radikal.ru/i110/0901/5b/f02c73a3cd94.jpg" - адрес изображения на сайте radikal.ru (подробнее)
• usemap="#picture" - условное наименование изображения-карты (может быть любое)
• map name="picture" - имя карты (полностью соответствует указанному выше)

Значения для областей-ссылок - href - цель ссылки, shape - форма области и coords - координаты - соответствуют трем областям (area) на изображении.
Прямоугольник "Профиль"

• href="http://bravedefender.ru/profile/" - адрес страницы профиля
• shape="rect" - обозначение формы "прямоугольник"
• coords="235,61,472,117" - координаты точек A (235,61) и С (472,117)

Многоугольник "Дневник"

• href="http://bravedefender.ru/blog" - адрес страницы дневника
• shape="poly" - обозначение формы "многоугольник"
• coords="235,118,362,118,474,152,457,207,229,146" - координаты углов многоугольника: точки D (235,118), E (362,118), F (474,152), G (457,207) и H (229,146)

Круг "Уроки Photoshop"

• href="http://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323" - адрес страницы постов из раздела "Уроки Photoshop"
• shape="circle" - обозначение формы "круг"
• coords="551,198,65" - координаты круга: центр - точка Q (551,198) и радиус - R=65

3. Финиш

Подставил все полученные значения в "систему" HTML-кода для навигационной карты-изображения и получил следующее:
<img width="640" height="367" alt="" src="//s45.radikal.ru/i110/0901/5b/f02c73a3cd94.jpg" usemap="#picture" />
<map name="picture">
  <area target="_blank" href="http://bravedefender.ru/profile/" shape="rect" coords="235,61,472,117" />
  <area target="_blank" href="http://bravedefender.ru/blog" shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
  <area target="_blank" href="http://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323" shape="circle" coords="551,198,65" /></map>

Именно этот код при использовании "превращается" в картинку с областями-ссылками.

Для тренировки есть "облегченный" легкий вариант создания участков-ссылок - пост "Тренировка: области-ссылки на изображении"