Создание ссылок на участках изображения: карта (map) ссылок

Создание ссылок на участках изображения: карта (map) ссылок

В предыдущем посте «Создание карты (map) для ссылок в Photoshop» я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы (был пост «Как сделать картинку ссылок»)

Теперь если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела «Уроки Photoshop» (внимание! после переноса блога на вордпресс и его переделки, ссылки не работают! но урок остается актуальным!)

Внимание! Ссылки удалены после переноса дневника! НО — объяснение, конечно, работает.

Создание ссылок на участках изображения: карта (map) ссылок

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

<imgcolor: #008000;">640"color: #008000;">367" src="https://bravedefender.ru/i110/0901/5b/f02c73a3cd94.jpg" usemap="#picture" /> 
<map name="picture">
<area target="_blank" href="https://bravedefender.ru/profile/" shape="rect" coords="235,61,472,117" />
<area target="_blank" href="https://bravedefender.ru/blog" shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
<area target="_blank" href="https://bravedefender.ru/showjournal.php?journalid=&keywordid=929323&quot; 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-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)

Создание ссылок на участках изображения: карта (map) ссылок

Необходимости в особой точности нет, поэтому определить координаты можно выяснить с помощью «линейки» в Photoshop — для ее вызова нажимаю Ctrl + R

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

Создание ссылок на участках изображения: карта (map) ссылок

2. HTML-код

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

<map></map>

Тэг map включает себя тэги <area>, которые определяют геометрические области карты-рисунка и связанные с ними ссылки.

Разобрался я так — для создания навигационной карты нужны:

теги с описанием изображения

<img src="http-адрес изображения" usemap="#имя карты" />

теги карты

<map name="имя карты">
</map>

теги областей

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

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

  • width=»640» — размеры изображения
  • src=»https://bravedefender.ru/f02c73a3cd94.jpg» — адрес изображения на сайте
  • usemap=»#picture» — условное наименование изображения-карты (может быть любое)
  • map name=»picture» — имя карты (полностью соответствует указанному выше)

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

Прямоугольник «Профиль»

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

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

  • href=»https://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=»https://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323″ — адрес страницы постов из раздела «Уроки Photoshop»
  • shape=»circle» — обозначение формы «круг»
  • coords=»551,198,65″ — координаты круга: центр — точка Q (551,198) и радиус — R=65

3. Финиш

Подставил все полученные значения в «систему» HTML-кода для навигационной карты-изображения и получил следующее:

<img src="https://bravedefender.ru/f02c73a3cd94.jpg" usemap="#picture" /> 
<map name="picture">
 <area target="_blank" href="https://bravedefender.ru/profile/"; shape="rect" coords="235,61,472,117" />
 <area target="_blank" href="https://bravedefender.ru/blog"; shape="poly" coords="235,118,362,118,474,152,457,207,229,146" />
 <area target="_blank" href="https://bravedefender.ru/showjournal.php?journalid=&keywordid=929323" shape="circle" coords="551,198,65" /></map>

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.