В предыдущем посте «Создание карты (map) для ссылок в Photoshop» я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы (был пост «Как сделать картинку ссылок»)
Теперь если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела «Уроки Photoshop» (внимание! после переноса блога на вордпресс и его переделки, ссылки не работают! но урок остается актуальным!)
Внимание! Ссылки удалены после переноса дневника! НО — объяснение, конечно, работает.
Для того, чтобы картинка заработала, я написал примерно такой 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" 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 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>
Именно этот код при использовании «превращается» в картинку с областями-ссылками.
Для тренировки есть «облегченный» легкий вариант создания участков-ссылок — пост «Тренировка: области-ссылки на изображении»