Как сделать в одной картинке несколько ссылок

Как сделать в одной картинке несколько ссылок

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

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

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

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

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

<img width="640" height="367" alt="" src="http://bravedefender.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=&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 width="ширина изображения" height="высота изображения" alt="" src="http-адрес изображения" usemap="#имя карты" />

— теги карты

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

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

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

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

width=«640» height=«367» — размеры изображения src="http://bravedefender.ru/f02c73a3cd94.jpg" — адрес изображения на сайте 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="http://bravedefender.ru/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=&keywordid=929323" shape="circle" coords="551,198,65" /></map>

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

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

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

У нас еще много очень интересных статей! Вот только несколько из них:

Как разместить плеер с Ли.ру в виде ссылки...

Об информере постов дневника: настройки, группы и другое...

Плакаты, иллюстрирующие нашу зависимость от современных техн...

Сделай детский альбом в Фотошоп

Наиболее эффективные методы продвижения. Авторитетное мнение...

Как поменять имя и пароль в почте liveinternet.ru (li.ru). С...


Как сделать в одной картинке несколько ссылок

Похожие записи:



Фото и инструкции поделок из соленого теста

Как правильно сделать штукатурку на потолке

Сделать электронную открытку приглашение на свадьбу