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

Для того, чтобы картинка заработала, я написал 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-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)

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

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" />

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

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

Для следующего поста "Создание ссылок на участках изображения: карта (map) ссылок" создам несложную картинку-карту с участками-ссылками на ней. В результате получится, как на рисунке внизу

Вариантов может быть стотыщмильёнов, например, ниже — два рисунка: первый — из поста _LexIncorp_, второй — сделал сам за 39,5 секунд :)

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

1. Начало

Сначала стырил изображение эпиграфа из сообщества...

Для удобства "ориентации на плоскости" иногда полезно включать функции: "линейка" (Ctrl + R) и изредка — "решетка" (Ctrl + ').
Примечание: ' находится на одной клавише с русской буквой Э возле Enter :)

2. Создание слоев для ссылок

На палитре инструментов выбрал Прямоугольное выделение (Rectangular Marquee Tool) — Ctrl + M

Выделил участок изображения под будущую ссылку (с названием "Профиль")

Скопировал выделение на новый слой: в главном меню — Слой — Новый — Слой через копирование (Layer — New — Layer via Copy) — Ctrl + J

Для снятия выделений используется комбинация клавиш — Ctrl + D

Делаю еще одно выделение для ссылки (с названием "Дневник")
Важно! Не забыл перейти (кликнуть или Alt + [ ) на нижний слой — выделяю-то именно на нем :)

Это выделение немного "извращу" :)
Клик правой клавишей мыши на нем — "Трансформация выделения" (Transform Selection)

Слегка поворачиваю прямоугольник, "ухватив" его за уголок. Нажимаю Enter

Копирую выделение на новый слой — Ctrl + J — и снимаю выделение — Ctrl + D

Следующее выделение для разнообразия делаю круглым.
Инструмент Эллипс (Elliptical Marquee Tool) находится там же, где и Прямоугольник (Rectangular Marquee Tool) — необходимо нажать на кнопочку и удерживать пару мгновений, затем выбрать из выпадающего меню

Выделяю участок под ссылку (с названием "Уроки Photoshop"). Для того, чтобы "эллипс" был "кругом", при выделении удерживаю нажатой клавишу Shift. Ctrl + J и Ctrl + D

3. "Украшение" слоев для ссылок

Для зрительного выделения участков под будущие ссылки применяю к ним эффекты.
Двойной клик на слое в палитре слоев вызывает меню опций смешивания (blending mode). Открыть окно опций можно также в главном меню: Слой — Стиль (эффекты) слоя — Опций смешивания (Layer — Layer Style — Blending Mode).
Не мудрствуя лукаво, отмечаю Падающую тень (Drop Shadow) и Внутреннюю тень (Inner Shadow)

Получил такую картинку

Применяю такие же (или не такие же…) эффекты к оставшимся двум другим слоям (эффекты слоя можно копировать и применять к другим — но в данном случае эффектов мало, и проще поочередно применить их к каждому слою)

4. Надписи

Подписываю ссылки: для порядка каждый раз перехожу на слой, соответствующий надписи (чтобы слой с текстом располагался над слоем с относящейся к надписи "ссылкой")

Результат:
А) Сохраняю в формате *.JPG на компьютере или
Б) Объединяю слои для дальнейшей работы, "не выходя из образа" :) Для объединения ВСЕХ слоев — нажимаю Ctrl + E

Для чего я все это делал — в следующем посте "Создание ссылок на участках изображения: карта (map) ссылок".