Чудо-бродилка по открыточкам на все случаи жизни!!! Девочки! Посмотрите, какую чудо-бродилку п...
Деревенчук Владимир - украинский художник - (2)Деревенчук Владимир - украинский художник Художник Деревенчук Владимир (Derevenchuk Vladimir) ...
Распакованный скрап-набор "Ви - (0)Распакованный скрап-набор "Винтажная шкатулка" Распакованный скрап-набор "Винтажная шкату...
Русский костюм, часть 4. - (0)Нет, дорогие мои! Я ничего не забыла и честно продолжу серию очерков по истории русского кос...
Учим деток рисовать. - (0)Учим деток рисовать. Учим деток рисовать. 1. 2. 3. 4.&nbs...
Создание ссылок на участках изображения: карта (map) ссылок |
В предыдущем посте "Создание карты (map) для ссылок в Photoshop" я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы. Если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела "Уроки Photoshop"
Для того, чтобы картинка заработала, я написал HTML-код:
<img width="640" height="367" alt="" src="//s45.radikal.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=2447247&keywordid=929323" shape="circle" coords="551,198,65" /></map>
Этот код можно вставить в поле сообщения (при нажатой кнопочке "Источник") или в эпиграф…
Посты по теме:
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 width="ширина изображения" height="высота изображения" alt="" src="http-адрес изображения" usemap="#имя карты" />
- теги карты
<map name="имя карты">
</map>
- теги областей
<area target="_blank(ссылка открывается в новой закладке)" href="http-адрес ссылки" shape="форма области (rect - прямоугольник, poly - многоугольник, circle - круг)" coords="координаты точек фигуры" />
В моем случае, значения оказались такими:
Значения для областей-ссылок - href - цель ссылки, shape - форма области и coords - координаты - соответствуют трем областям (area) на изображении.
Прямоугольник "Профиль"
Многоугольник "Дневник"
Круг "Уроки Photoshop"
3. Финиш
Подставил все полученные значения в "систему" HTML-кода для навигационной карты-изображения и получил следующее:
<img width="640" height="367" alt="" src="//s45.radikal.ru/i110/0901/5b/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=2447247&keywordid=929323" shape="circle" coords="551,198,65" /></map>
Именно этот код при использовании "превращается" в картинку с областями-ссылками.
Для тренировки есть "облегченный" легкий вариант создания участков-ссылок - пост "Тренировка: области-ссылки на изображении"
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |