Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Предыдущая тема Следующая тема Перейти вниз

Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Luz в Вт 20 Июл - 17:48

Что такое карта-изображение?

Сегодня мы расскажем вам, как сделать отдельные зоны взятого вами изображения кликабельными - то есть как разметить любое изображение невидимыми областями, которые будут являться активными ссылками.
Такое изображение называется картой-изображением.

Эти зоны могут быть в форме прямоугольников, кругов или многоугольников. Сами контуры, добавленные вами, остаются невидимыми для пользователя - только элементы самой картинки подсказывают, что по ним можно щелкнуть мышкой (например, надписи, таблички, указатели, стрелки лого , иконки и т.д.)

Подготовка изображения

В большинстве случаев для реализации такой карты-изображения нужно проделать предварительную работу в графическом редакторе, чтобы смонтировать на одной картинке разные элементы и наложить нужные вам надписи.
Для иллюстрации возьмем совсем простой пример.
Мы взяли картинку с пустыми указателями :



и наложили на нее 3 надписи.



Сделаем теперь так, чтобы все три надписи стали активными ссылками и открывали соответствующие веб-страницы.


Как задать активные области? Форма областей и координаты.

Для создания карты-изображения с несколькими кликабельными зонами нам понадобится тэг AREA.
Именно этот тэг и будет задавать активные зоны нашей картинки, к которым будут привязаны ссылки. Эти зоны называются активными областями.

Чтобы определить активную область, нужно выбрать ее форму и задать координаты.

Форма области определяется параметром SHAPE. Всего можно использовать 3 формы - прямоугольник (shape="rect"), круг (shape="circle") и многоуольник (shape="poly") .

В нашем примере мы должны будем использовать два типа формы - прямогольники для надписей "Forum2x2" и "Help" и многоугольник для надписи "Hitskin"

Обратите внимание : если ваша область расположена под углом, вы должны воспользоваться многоугольной формой, даже если фактически зона является прямоугольником.

На скриншоте мы выделили наши области красным цветом, но они останутся невидимыми для пользователей!




Прямоугольная область

Эта область используется чаще всего и ее проще всего определить.

Она задается с помощью координат двух противоположных углов прямоугольника - верхнего левого угла и правого нижнего угла.
X1, Y1 - координаты левого верхнего угла
X2 , Y2 - координаты правого нижнего угла

X - это расстояние от заданной точки до левого края картинки
У - это расстояние от заданной точки до верхнего края картинки

Чтобы вычислить эти расстояния, вы можете воспользоваться специальными линейками.
Если вы владеете графическими редакторами или инструментами для разработчиков (как Web Developer), у вас есть встроенные линейки этих программ. Но вы можете также скачать отдельную виртуальную линейку. Например, дополнение Firefox - MesureIt





Расстояние от левого края изображения до левого верхнего угла прямоугольника, который обводит надпись Forum2x2.ru, - это наша координата X1 = 63 px
Расстояние от верхнего края изображения до левого верхнего угла прямоугольника - это координата Y1 = 129 px

Теперь точно также надо измерить расстояние от левого края до нижнего правого угла прямоугольника (X2) и расстояние до этого угла от вехнего края изображения (Y2)


Найденные координаты будут значениями параметра coords:

Код:
coords="X1, Y1, X2, Y2"

а вся строчка, задающая нашу прямоугольную зону будет выглядеть так:

Код:
<area shape="rect" title="Ваш текст" coords="X1, Y1, X2, Y2" href="URL_website">
,
где вместо "Ваш текст" надо поставить текст, показываемый при наведении на эту область мышкой, а вместо URL_website - саму ссылку на web-страницу

В нашем примере код будет выглядеть так

Код:
<area shape="rect" title="Сайт Forum2x2.ru" coords="63, 129, 368, 128" href="http://forum2x2.ru">


Многоугольная область

Область в виде "многоугольника" (это может быть и треугольник!) задается последовательно координатами каждой вершины : X1, Y1, X2, Y2, X3, Y3 и в заключение повторяются координаты первой вершины:

Код:
coords="X1, Y1, X2, Y2, X3, Y3, ...  X1, Y1"

Не забудьте указать другое значение параметра SHAPE : poly -прямоугольник!

Код:
<area shape="poly" title="Ваш текст" coords="X1, Y1, X2, Y2, X3, Y3, X1, Y1" href="URL_website">


Круглая область

Окружность задается координатами центра окружности - X, Y - и радиусом R

Код:
<area shape="circle" title="Ваш текст" coords="X, Y, R" href="URL_website">


Окончательный код HTML для вашей интерактивной карты-картинки

Нам осталось собрать вместе элементы AREA, определяющие активные области нашего изображения.
Для этого все элементы AREA помещаются в контейнер MAP, который привяжет все координаты выделенных областей к основному изображению.

Код:
<img usemap="#ваше название" src="URL_картинки" width="Ширина картинки" height="Высота картинки" border="0">
<map name="ваше название">
<area shape="rect" title="Ваш текст" coords="X1,Y1,X2,Y2" href="URL_website">
<area shape="circle" title="Ваш текст" coords="X,Y,R" href="URL_website">
<area shape="poly" title="Ваш текст" coords="X1, Y1, X2, Y2, X3, Y3, ... X1, Y1" href="URL_website">
</map>

В нашем примере код будет выглядеть так :

Код:
<img usemap="#Crossroad" src="http://i31.servimg.com/u/f31/11/71/42/99/strelk16.png" width="445" height="384" border="0">
<map name="Crossroad">
<area shape="rect" title="сайт Forum2x2" coords="63, 129, 368, 191" href="http://forum2x2.ru">
<area shape="rect" title="Форум форумов" coords="358, 237, 439, 285" href="http://help.forum2x2.ru">
<area shape="poly" title="сайт Hitskin" coords="5, 76, 113, 27, 130, 61, 13, 110, 5, 76" href="http://hitskin.com">
</map>

Посмотреть, как работает код нашего примера, можно на демонстрационном форуме


Последний раз редактировалось: Luz (Вт 20 Июл - 19:56), всего редактировалось 1 раз(а)



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16467
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2563

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Терианора в Вт 20 Июл - 19:35

У-у-у... Гораздо проще скачать фотошоп, или вовсе заказать у кого-нибудь!)
avatar
Терианора
 

Женщина

Сообщения : 99
Возраст : 20
Регистрация : 2009-07-28
Благодарности : 6

Без предупреждений

http://endless-rain.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Ринкате в Вт 20 Июл - 19:39

странно, а есть ли область? ну указать на одну пиксель что ли ...
avatar
Ринкате
 

Мужчина

Сообщения : 766
Возраст : 24
Регистрация : 2010-05-28
Благодарности : 164

Без предупреждений

http://souleater.2x2forum.ru/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор JackaN в Вт 20 Июл - 19:41

@Терианора пишет:У-у-у... Гораздо проще скачать фотошоп
24
avatar
JackaN
 

Мужчина

Сообщения : 1035
Возраст : 22
Регистрация : 2009-08-27
Благодарности : 166

Без предупреждений

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Luz в Вт 20 Июл - 19:55

А где живой пример?
girl_yes

Замечание принято. Посмотреть действие приведенного в примере окончательного кода можно здесь : http://demoforum.forum2x2.ru/index.htm

Гораздо проще скачать фотошоп, или вовсе заказать у кого-нибудь!)
Да, чтобы получить исходную картинку вам нужен фотошоп или кто-то , кто вам с помощью фотошопа (или другого редактора) эту картинку сделает. Но фотошоп не даст вам активных ссылок, отсылающих на разные страницы. См как работает код на демофоруме.




Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16467
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2563

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Терианора в Вт 20 Июл - 20:33

Почему же? Даст, с лёгкостью, вот мануальчик
А заказ легко и тут сделать.


Последний раз редактировалось: Терианора (Вт 20 Июл - 20:36), всего редактировалось 1 раз(а)
avatar
Терианора
 

Женщина

Сообщения : 99
Возраст : 20
Регистрация : 2009-07-28
Благодарности : 6

Без предупреждений

http://endless-rain.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор darkWoL в Вт 20 Июл - 20:40

Терионора, там описано ровно то же самое.
Да и ImageReady уже давно не поставляется с Photoshop.

darkWoL
 

Сообщения : 740
Регистрация : 2008-01-11
Благодарности : 111

Без предупреждений

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор darkWoL в Вт 20 Июл - 21:52

Кстати, хотел сказать, да Фотошопом отвлекли...

В XHTML1.0 Transitional теги area и img должны быть закрыты. Это если кто-то заморачивается с лишними ошибками в валидаторе (и не только).

darkWoL
 

Сообщения : 740
Регистрация : 2008-01-11
Благодарности : 111

Без предупреждений

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор MoonLedy в Вт 17 Авг - 23:32

Всё получилось...ещё про заморочку с кордами могу добавить -
Координаты так же можно узнать в примитивном Пэинте. Берёте карандаш, наводите его на нужную точку. Пиксель. Смотрите в нижний правый угол. Вернее, немного левее от него. Там будет вот такая картина.

Соответственно - Х и Y - это координаты Верхнего левого угла.
Они же X1 и Y1. Для X2 и Y2 просто наведите карандашом на другую точку.

Большое спасибо за мануал, очень хотела сделать таким образом меню.
avatar
MoonLedy
Новичок

Женщина

Сообщения : 5
Регистрация : 2010-02-14
Благодарности : 0

Без предупреждений

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Ринкате в Ср 18 Авг - 8:20

Советую так же Photo-Pain (Corel) , отлично создает такие вещи
avatar
Ринкате
 

Мужчина

Сообщения : 766
Возраст : 24
Регистрация : 2010-05-28
Благодарности : 164

Без предупреждений

http://souleater.2x2forum.ru/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Belaya в Пт 28 Янв - 16:36

На самом деле все так просто, спасибо, отличная тема! MesureIt - удобно очень.
avatar
Belaya
Новичок

Женщина

Сообщения : 24
Возраст : 32
Регистрация : 2010-08-18
Благодарности : 3

Без предупреждений

http://maresmeron.forumgrad.com/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор idiot в Вт 5 Апр - 16:21

а куда вставлять код? какого типа должен быть форум?

idiot
Новичок

Сообщения : 13
Регистрация : 2011-04-04
Благодарности : 0

Без предупреждений

http://fuckinglife.2x2tv.net/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Dana Domirani в Вт 5 Апр - 16:29

На страницу html, в приветствие на главной странице, в шаблон главной страницы, в виджет.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22419
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9027

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Александр 72 в Сб 17 Сен - 1:19

@Dana Domirani пишет:На страницу html, в приветствие на главной странице, в шаблон главной страницы, в виджет.
Подскажите, а в Логотип можно вставить код? Все сделал, не могу поменять Логотип на Логотип с активными ссылками.

Александр 72
Новичок

Сообщения : 13
Регистрация : 2010-12-19
Благодарности : 0

Без предупреждений

http:///csht.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Dana Domirani в Сб 17 Сен - 12:20

У Вас движок BB2?
Тогда откройте в ПА > Шаблоны > Общие > overall_header (Верхняя часть страницы)
Нажмите изменить modif
Удалите оттуда фрагмент
Код:
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
и подставьте вместо него Ваше изображение.
Потом сохраните и опубликуйте (!) шаблон, нажав на plus



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22419
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9027

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками

Сообщение автор Александр 72 в Сб 17 Сен - 12:52

@Dana Domirani пишет:У Вас движок BB2?
Тогда откройте в ПА > Шаблоны > Общие > overall_header (Верхняя часть страницы)
Нажмите изменить modif
Удалите оттуда фрагмент
Код:
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     

                     <!-- END switch_logo_center -->
и подставьте вместо него Ваше изображение.
Потом сохраните и опубликуйте (!) шаблон, нажав на plus
Спасибо! Все получилось.

Александр 72
Новичок

Сообщения : 13
Регистрация : 2010-12-19
Благодарности : 0

Без предупреждений

http:///csht.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения