Техническая поддержка SpyBB

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка SpyBB » Быстрая Справка (FAQ) » FAQ по созданию MAP-карт


FAQ по созданию MAP-карт

Сообщений 1 страница 3 из 3

1

FAQ  по созданию MAP-карт (карта изображения)



В этой статье будет рассмотрено создание map-карт на примере программы (exMacromedia) Adobe Dreamweaver.

Сперва начнем на примере создания карты в программе Adobe Dreamweaver CS3.
Открываем программу, нажав кнопкой мышки по ярлычку, после чего мы попадем на главную страницу программы.

Выбираем из списка - HTML (обведено красным на скриншоте 1.)

Скришот 1
http://img144.imageshack.us/img144/839/linkdp9.th.gif

После чего мы попадаем в редактор HTML и видим перед собой рабочую область (скриншот  2)

Скриншот 2
http://img184.imageshack.us/img184/3676/untitled4pi0.th.gif

  Чтобы вставить изображение нужно в области для ввода кода (см. скриншот2) ввести следующий код 

Код:
<img src=”адресс картинки”/>

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

Скриншот 3
http://img296.imageshack.us/img296/5423/untitled5eg2.th.gif

Сперва  давайте ознакомимся с некоторыми инструментами программы Dreamweaver.
Под номером 1 (скриншот 3) расположен инструмент для создания прямоугольных выделений, под номером 2 расположен инструмент для создания областей виде окружности, под номером 3 расположен инструмент для создания многоугольных областей, под номером 4 расположен инструмент для создания всплывающего текста который будет показываться при наведении курсора на картинку.

Скриншот 4
http://img72.imageshack.us/img72/1414/78189940bz2.th.gif

На скришоте 4 показаны примеры нанесения разного вида  областей, а также выделены нужные инструменты. Красным обведена область куда вводится прямая ссылка на нужную вам страницу.
Синим выделено меню для выбора способа перехода. Если вас устраивает открытие новой  страницы в том же окне ничего там не меняйте, а если вам надо чтобы новая страница открывалась в новом окне, выберете вариант  “_blank”, в области выделенной зеленым расположена область для ввода текста который будет показываться при наведении на выделенную нами область.

Удачи вам в создании карт.  http://mybb.ru/f/collection/0213.gif

0

2

Создание МАР-карты в Paint.
(с) Айрин
Данный FAQ предназначен для тех, у кого по каким-то причинам нет специальных программ для создания MAP-карт, а создавать карты очень хочется :)
Для создания карты нам нужен всем знакомый и простой Paint и самый обыкновенный текстовый документ, с которым мы будем работать в блокноте.
В Paint'e нам пригодятся всего 2 инструмента:
Карандаш и строка состояния (см. скриншот №1)


Создание квадратной кликабельной области
1. Основной код: Посмотрев скриншот номер №1 Вы заметили там три фигуры, различной формы, из этих фигур мы будем делать кликабельные области.
И первая, и одновременно самая простая область - квадратная.
Итак, создаем текстовый документ. Открываем его и копируем туда следующее:

<img src="Адрес картинки, из которой будем делать карту" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="" href=""></map>

<img src="Адрес картинки, из которой будем делать карту" - вместо моих слов вставляете ссылку на нужную картинку, все просто.
border="0" - рамка вокруг картики. В данном коде стоит 0, поэтому рамка отсутствует. Вы же при желании можете поставить, например, 1, и тогда рамка появится. Чем больше число, тем толще рамка.
<area shape="rect" - данный параметр показывает, что мы создаем именно квадратную область, а не круглую или многоугольную.
В других примерах мы рассмотрим параметры для вышеназванных фигур.
coords="" - сюда мы будем вписывать координаты. Что это такое и для чего они нужны будет рассмотрено позже.
href="" - сюда мы будем вставлять ссылку, по которой Вы будете переходить, кликнув по размеченной области.

2. Получение координат: Открываем картинку, из которой будем делать карту, в Paint'e. Возьмите карандаш, и поводите им по рисунку (просто поводите мышкой, не рисуя), обратите внимание на строку состояния, в которой будут изменяться цифры в зависимости от положения карандаша на картинке.
Эти цифры - и есть координаты той точки, на которой Вы остановите карандаш. В случае с квадратной областью - нам нужно определить координаты 2-х точек, а именно левого верхнего и правого нижнего углов квадрата. (см. скриншот №2)
Наводим карандаш на левый верхний угол, и смотрим на панель состояния, в ней будут отображаться две цифры, для удобства запишите их куда-нибудь.
Затем повторяем ту же операцию и с правым нижним углом. В итоге у нас вышло 4 цифры-координаты (от 2-х углов по две цифры).
Теперь возвращаемся к коду, который был дан выше и ищем параметр coords="" и в кавычках и через запятую пишем получившиеся цифры.
Например:

coords="78,85,157,242"

Теперь в том же коде ищем параметр href="" и между кавычками вставляем ссылку, по который Вы будете переходить, щелкнув по размеченной области.
Например:

href="http://spybb.ru"

В итоге должен получится код типа:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>

Итак, карта готова (а если на карте нужно выделить несколько областей, то готова лишь часть карты :) )
Чтобы добавить еще областей,просто копируйте выделенную строку, и пишите их друг за другом между тегов <map name="Map"></map>:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>


Создание круглой кликабельной области
Теперь мы будем делать кликабельной фигуру №2, которая имеет форму круга.
Для нее нам потребуется определить координаты центра окружности и ее радиус.
Далее будет рассмотрено только получение координат, куда их прописывать, куда ставить ссылку и прочее было подробно рассмотрено в предыдущем примере, больше возвращаться к этому не будем.
Получение координат:
Отрываем картинку в Paint, берем карандаш (а еще лучше кисть, чтобы можно было отметить действительно видимую точку) и на глаз определите середину круга, и оставьте там точку, она нам пригодиться (См. скриншот №3)
Координаты этой точки (наводим карандашом на точку, получаем две цифры) - координаты центра окружности.
Теперь нам нужно определить радиус. Берем инструмент "Линия" и проводим линию от центра окружности к границе круга, при этом не отпуская кнопку мыши смотрим на цифры, получившиеся в строке состояния (см. скриншот №4)
Нам нужна вторая цифра, т.е. та, которая правее. Но прежде чем вписать ее в координаты, ее мысленно нужно умножить на два и затем уже получившееся число вписывать как радиус.
Итого в координаты круглой области мы должны записать три цифры: две - от точки в середине круга, и одну, представляющую из себя радиус.
Добавим в основной код нашей мар-карты строку, показывающую круглую область, и теперь он будет выглядеть так:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru">
<area shape="circle" coords="28,37,20" href="http://mybb.ru"></map>

● Важно: то, что выделено красным - форма области, нужно обязательно писать circle, чтобы было ясно, что это именно круглая область, а не квадратная или многоугольная.


Создание многоугольной кликабельной области
Теперь осталась последняя область - фигура №3, которая является многоугольником, т.е. имеет множество углов.
Получение координат: Для того, чтобы сделать многоугольную область кликабельной нужно определить координаты точек всех ее углов.
Т.е. наводим карандаш на каждый угол, и получаем с каждого угла по две цифры, чем больше углов, тем больше цифр получится соответственно.
В нашем случае шесть углов, с каждого угла по две цифры, итого - 12 цифр. (см. скриншот №5)
● Важно: В форме области нам теперь нужно указать, что это именно многоугольная область, поэтому параметр area shape будет выглядеть так:

<area shape="poly" coords="32,38,26,15,44,14,49,28,47,45,86,35" href="http://help.spybb.ru">

В параметре coords как и раньше прописываем получившиеся координаты через запятую, и в параметре href указываем ссылку.
Добавим многоугольную область в наш общий код:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru">
<area shape="circle"coords="28,37,20" href="http://mybb.ru">
<area shape="poly" coords="32,38,26,15,44,14,49,28,47,45,86,35" href="http://help.spybb.ru"></map>


Все, мар-карта готова. Мы сделали кликабельными все три фигуры на рисунке. Чаще всего приходится работать с прямоугольными областями, но здесь были рассмотрены все варианты, на всякий случай :)
Код мар-карты ставится в таком виде, в каком он представлен здесь, .т.е ничего из кода ничего не выкидываем.
Ставить можно абсолютно везде, начиная от HTML-верха, заканчивая формой ответа.

+6

3

Создание Мар - карты в Image Ready

1) Открываешь в Image Ready свою картинку, на ней уже написано, что тебе нужно.
2) Идёшь в меню Окно и ставишь галочку напротив Карта ссылок.
3) Берёшь Инструмент Прямоугольная карта ссылок и выделяешь нужную тебе часть.
http://i071.radikal.ru/0908/c5/69c0bebaff27t.jpg
4) Дальше обращаемся к окошку:
http://i013.radikal.ru/0908/11/6af47b0c93a6.png
Где 1 собственно пишем ссылку, а где два пишем что там, что бы если вдруг что поменять надо будет не запутаться. Остальные выделения делаем так же
5) Файл---> Сохранить оптимизированый
Сохраняем.
6) Перегоняем картинку в фотошоп, это чтобы качество лучше было сохраняем её в  png

7) Возвращаемся к тому, что сохранили в реади - HTML страничке, открываем её через блокнот и видем:

<html>
<head>
<title>449882540</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (449882540.jpeg) -->
<img src="изображения/449882540.gif" width="800" height="600" border="0" alt="" usemap="#id449882540_Map">
<map name="id449882540_Map">
<area shape="rect" alt="правила" coords="102,301,254,355" href="правила.ru">
<area shape="rect" alt="сюжет" coords="102,247,254,301" href="сюжет.ru">
<area shape="rect" alt="шаблон" coords="102,186,255,234" href="шаблон.ru">
</map>
<!-- End ImageReady Slices -->
</body>
</html>

То что выделено красным цветом нужно сменить на ссылку с нашей картинкой^^
И ещё надо убрать лишнее
Вот и всё, за орфаграфию просьба не бить х.х"

0


Вы здесь » Техническая поддержка SpyBB » Быстрая Справка (FAQ) » FAQ по созданию MAP-карт