Просмотров: 71384

Как сделать изображение как на картах

Закрыть ... [X]

bobot 08.01.200909.08.2016 Рубрика ИнтернетМетки HTML, изображения, Интернет, картинки, карты, коды, ссылки, уроки, фигуры Коммент.

2 425 смотр.

Создание ссылок на участках изображения: карта (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>

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

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

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

Видео. Экспорт дневника на компьютер. Настройка домена...

10 ошибочных научных иллюстраций, к которым все привыкли...

Изменение превью

Каким бывает современный интернет?...

Генератор предложений руки и сердца...

Возраст сексуального согласия (карта мира)...

2 425 смотр.


Источник: http://BraveDefender.ru/post93480120/

Похожие новости


Как добраться от аэропорта праги до карловых вар самостоятельно
Как сделать букет с киндерами
Клумба из пластиковых бутылок своими руками для сада
Яблочное повидло в домашних условиях на зиму
Как сделать вкусный бутерброд
Сделать мансарду своими руками
Как рассаживать гузманию в домашних условиях
Сорока гомель студия ручной работы




ШОКИРУЮЩИЕ НОВОСТИ