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

[640x367]

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

Ошибка! Не указано имя файла.640" height="367" alt="" src="http://bravedefender.ru/wp-content/uploads/2009/01/f02c73a3cd94.jpg" usemap="#picture" border="0" />
http://bravedefender.ru/profile/" shape="rect" coords="235,61,472,117" />
http://bravedefender.ru/blog" shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
http://bravedefender.ru/showjournal.php?journalid=...amp;keywordid=929323" shape="circle" coords="551,198,65" />

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

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

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

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

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

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

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

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

2. HTML-код

Навигационные карты задаются тэгом

.
Тэг map включает себя тэги
, которые определяют геометрические области карты-рисунка и связанные с ними ссылки.
Разобрался я так — для создания навигационной карты нужны:
- теги с описанием изображения
Ошибка! Не указано имя файла.ширина изображения" height="высота изображения" alt="" src="http-адрес изображения" usemap="#имя карты" />
- теги карты
имя карты">

- теги областей
(ссылка открывается в новой закладке)" href="http-адрес ссылки" shape="форма области (rect — прямоугольник, poly — многоугольник, circle — круг)" coords="координаты точек фигуры" />

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

• width="640" height="367" — размеры изображения
• src="http://bravedefender.ru/wp-content/uploads/2009/01/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-кода для навигационной карты-изображения и получил следующее:
http://bravedefender.ru/wp-content/uploads/2009/01/f02c73a3cd94.jpg" usemap="#picture" />
http://bravedefender.ru/profile/" shape="rect" coords="235,61,472,117" />
http://bravedefender.ru/blog" shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
http://bravedefender.ru/showjournal.php?journalid=...amp;keywordid=929323" shape="circle" coords="551,198,65" />

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

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