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

Поделиться12009-01-04 00:10:40

Автор: Dimitra
Гость

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

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

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

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

Скриншот 2

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

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

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

Скриншот 3

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

Скриншот 4

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

Удачи вам в создании карт.

Автор - [M.@.t.r.i.x]

Теги: faq, map-карты, руководство

+4

Поделиться22009-01-04 15:10:56

Автор: ~ Ren ~
Помощник ZeroParking
Зарегистрирован: 2008-06-21
Приглашений: 0
Сообщений: 41
Уважение: +1
Позитив: +4
Провел на форуме:
1 день 2 часа
Последний визит:
2010-09-28 17:33:02

А вы не подскажите где это можно сделать на заказ ??? Просто у меня такой программы нема ...

0

Поделиться32009-01-06 23:45:45

Автор: D_the_B
Помощник ZeroParking
Откуда: я такой с Шарьи
Зарегистрирован: 2008-03-24
Приглашений: 0
Сообщений: 1255
Уважение: +133
Позитив: +41
Пол: Мужской
Возраст: 32 [1992-11-01]
Провел на форуме:
12 дней 0 часов
Последний визит:
2012-03-21 21:56:16

~ Ren ~
я давным давно создал тему Создай красивое графическое объявление! однако наставили плюсов и ничего не сказали

+1

Поделиться42009-08-15 15:23:42

Автор: Yuki
Форумчанин
Зарегистрирован: 2008-12-30
Приглашений: 0
Сообщений: 336
Уважение: +49
Позитив: +17
Пол: Женский
Возраст: 30 [1994-09-22]
Провел на форуме:
5 дней 3 часа
Последний визит:
2010-08-20 22:02:14

Создание MAP-карт в Adobe Image Ready

Этот урок научит Вас быстро и легко создать код для МАР-карты на сайт или форум с помощью программы Adobe Image Ready.

Для начала откройте программу Adobe Image Ready. Загрузите выбранный документ.

Допустим вам надо выделить семь областей (как на скриншоте 1.)

Работать мы будем с помощью инструмента Rectangle Image Map Tool. Этот инструмент позволяет выполнить только прямоугольные выделения. На Скриншоте 2 видно, как выглядит его значок.

Этим инструментом необходимо выделить область № 1.

Теперь необходимо дважды кликнуть мышкой по выделенной области. В правом нижнем углу, рядом с панелью слоев, появится небольшое окно.

В этом окошке есть несколько граф. Работать следует только с двумя: Link и Alt. В графу Link вводим ссылку - на страницу, которая будет открываться при нажатии на выделенную область. В графу Alt пишем описание - то есть те слова, которые будут появляться при наведении курсора на выделенную область(не обязательно делать).

Далее необходимо проделать то же самое со всеми остальными областями.

Теперь необходимо нажать на значок с изображением символа Internet Explore. ВНИМАНИЕ: в других браузерах эта функция может не сработать! Значок находится в Панели Инструментов и называется Prewiew in iexplore.

Перед Вами откроется окно, в котором в верхней части будет выбранная Вами картинка, а в нижней - код, который необходимо скопировать и вставить в код Вашего форума или сайта.

Теперь вместо выделенного красным
нужно вставить ссылку на изображение которое вы использовали (пропустить через Радикал)

<html>
<head>
<title>ba6bec4dbd39</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<img src="ссылка" width="370" height="378" border="0" alt="" usemap="#ba6bec4dbd39_Map">
<map name="ba6bec4dbd39_Map">
-------------------------------------------------------------------------------------
</map>

</body>
</html>

(с) Nataly, Yuki

Отредактировано Yuki (2009-08-15 15:35:30)

+3

Поделиться52010-04-17 10:26:05

Автор: ГрУсТнЫй ЙоЖеГ
Новичок
Откуда: Бийск
Зарегистрирован: 2010-04-17
Приглашений: 0
Сообщений: 1
Уважение: 0
Позитив: 0
Пол: Женский
Возраст: 32 [1991-12-13]
Провел на форуме:
4 часа 7 минут
Последний визит:
2010-12-27 14:16:28

Товарищи! А какие еще проги для работы с HTML вы можете посоветовать??? :question:
Я привыкла до всего сама доходить... Так сказать, "через тернии к звездам"!

0

Поделиться62010-04-25 10:45:03

Автор: Miss Choco
Новичок
Зарегистрирован: 2010-03-05
Приглашений: 0
Сообщений: 11
Уважение: 0
Позитив: 0
Провел на форуме:
8 часов 25 минут
Последний визит:
2010-11-04 13:14:31

Интересный урок... А не подскажете где скачать эту программу?

0

Поделиться72010-04-25 12:14:49

Автор: Ви
Может и модератор
Зарегистрирован: 2008-12-29
Приглашений: 0
Сообщений: 2220
Уважение: +253
Позитив: +31
Пол: Женский
Возраст: 30 [1994-11-23]
Провел на форуме:
1 месяц 4 дня
Последний визит:
2012-08-16 18:17:18

Miss Choco, она идёт вместе с ФШ, и отдельно, кажется, скачать нельзя.
Adobe Image Ready можно найти в ФШ CS2

0

Поделиться82010-04-25 13:38:57

Автор: AnMold
Форумчанин
Зарегистрирован: 2010-04-21
Приглашений: 0
Сообщений: 24
Уважение: +2
Позитив: +2
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
2010-05-24 20:50:28

Ви эту программу отдельно легко можно найти в интернете, так что не вешайте лапшу. Помню когда пользовался Adobe Photoshop CS2 там была такая функция, в Adobe Photoshop CS4, который я использую, эта функция пропала =(

0

Поделиться92010-04-25 17:37:43

Автор: Ви
Может и модератор
Зарегистрирован: 2008-12-29
Приглашений: 0
Сообщений: 2220
Уважение: +253
Позитив: +31
Пол: Женский
Возраст: 30 [1994-11-23]
Провел на форуме:
1 месяц 4 дня
Последний визит:
2012-08-16 18:17:18

AnMold, оке, прочитали моё сообщение ещё раз, заметили там слово "кажется" и строку "Adobe Image Ready можно найти в ФШ CS2".
Если программу можно найти в интернете, пожалуйста, с вас ссылка

AnMold написал(а):

Adobe Photoshop CS4, который я использую, эта функция пропала =(

Она уже встроена в ФШ

0

Поделиться102010-05-12 22:03:54

Автор: Eosfor
Новичок
Зарегистрирован: 2010-05-12
Приглашений: 0
Сообщений: 5
Уважение: 0
Позитив: 0
Пол: Мужской
Возраст: 36 [1988-08-22]
Провел на форуме:
4 часа 39 минут
Последний визит:
2010-08-21 21:28:18

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Р”РѕРєСѓРјРµРЅС‚ Р±РµР· РЅР°Р·РІР°РЅРёСЏ</title>
</head>

<body>
<p>
  <img src="http://s54.radikal.ru/i146/1005/0e/d53565c1daa3.gif" width="965" height="683" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="669,206,737,237" href="http://ravenloft.rolka.su/viewforum.php?id=2" target="_blank" alt="Р”РµСЂРµРІРЅСЏ Р‘Р°СЂРѕРІРёСЏ" />
    <area shape="rect" coords="189,142,255,188" href="http://ravenloft.rolka.su/viewforum.php?id=8" target="_blank" />
    <area shape="rect" coords="822,581,895,628" href="http://ravenloft.rolka.su/viewforum.php?id=9" target="_blank" alt="Р˜РјРјРѕР»" />
    <area shape="rect" coords="301,385,380,428" href="http://ravenloft.rolka.su/viewforum.php?id=7" target="_blank" alt="РўРµСѓС„РµР»СЊРґРѕСЂС„" />
    <area shape="rect" coords="461,182,555,214" href="http://ravenloft.rolka.su/viewforum.php?id=10" target="_blank" alt="Р’Р°Р»Р»Р°РєРё" />
    <area shape="rect" coords="41,301,155,352" href="http://ravenloft.rolka.su/viewforum.php?id=11" target="_blank" alt="Р—РµР№РґРµРЅР±СѓСЂРі" />
  </map>
</p>
</body>
</html>

Однако при открытии ссылки, ссылка выдаётся вида http://ravenloft.rolka.su/pages/viewforum.php?id=X, а должно быть http://ravenloft.rolka.su/viewforum.php?id=X.
В чём может быть проблема?

0

Поделиться112010-05-12 22:57:31

Автор: Dimitra
Гость

Делайте в Adobe Dreamweaver и не будет проблем

0

Поделиться122010-05-13 01:10:44

Автор: Eosfor
Новичок
Зарегистрирован: 2010-05-12
Приглашений: 0
Сообщений: 5
Уважение: 0
Позитив: 0
Пол: Мужской
Возраст: 36 [1988-08-22]
Провел на форуме:
4 часа 39 минут
Последний визит:
2010-08-21 21:28:18

в нём и создавалось.

0

Поделиться132010-05-13 01:18:29

Автор: Toshiro-kun
Да, модератор я, угу
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 3766
Уважение: +1013
Позитив: +9
Пол: Мужской
Возраст: 34 [1990-08-29]
Провел на форуме:
1 месяц 5 дней
Последний визит:
2012-08-11 15:49:22

Eosfor
Знаете даже не знаю огорчу я вас или обрадую, но все ссылки ведут куда нужно вам, и нет в пути pages/
Проверил.

0

Поделиться142010-05-13 01:32:34

Автор: Dimitra
Гость

Eosfor наверное он (она) ставит эту мап карту на страницы (портал) а том ссылки не работают так как автоматически подставляют слово pages/

и это не только для карты. это так все ссылки

0

Поделиться152010-05-13 12:29:28

Автор: Eosfor
Новичок
Зарегистрирован: 2010-05-12
Приглашений: 0
Сообщений: 5
Уважение: 0
Позитив: 0
Пол: Мужской
Возраст: 36 [1988-08-22]
Провел на форуме:
4 часа 39 минут
Последний визит:
2010-08-21 21:28:18

Dimitra написал(а):

а том ссылки не работают так как автоматически подставляют слово pages/

и это не только для карты. это так все ссылки

Печально( Всё равно спасибо за помощь.

0

Поделиться162010-05-25 15:37:45

Автор: Jared.
Новичок
Зарегистрирован: 2010-03-31
Приглашений: 0
Сообщений: 1
Уважение: 0
Позитив: 0
Провел на форуме:
1 час 12 минут
Последний визит:
2010-05-25 16:15:58

Спасибо, все отлично работает)

0

Поделиться172010-06-18 00:25:32

Автор: Kamila Jayson
Новичок
Зарегистрирован: 2010-06-18
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: 0
Провел на форуме:
50 минут
Последний визит:
2010-06-20 00:11:43

Ого, большое спасибо, очень познавательный урок.)

0

Поделиться182010-06-22 20:00:43

Автор: qwas
Новичок
Зарегистрирован: 2010-06-22
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: 0
Провел на форуме:
55 минут
Последний визит:
2010-12-13 21:58:27

Блин как все сложно... но понятно)))))))

0

Поделиться192010-09-25 10:40:51

Автор: Лорея
Форумчанин
Откуда: Волгоград
Зарегистрирован: 2010-05-21
Приглашений: 0
Сообщений: 27
Уважение: 0
Позитив: 0
Пол: Женский
Возраст: 39 [1985-10-09]
Провел на форуме:
10 часов 15 минут
Последний визит:
2012-09-17 07:40:35

Dimitra написал(а):

Eosfor наверное он (она) ставит эту мап карту на страницы (портал) а том ссылки не работают так как автоматически подставляют слово pages/

и это не только для карты. это так все ссылки

Форумы с "двойным" адресом могут с легкостью обойти эту проблему.
Дело в том, что pages/ автоматом прописывается только к тем ссылкам, которые содержат текущий адрес сайта. Поясню: у сайта ФРПГ "Энирин" есть два адреса enirin.ru и thepastworld.rolka.su. Основным на данный момент является первый, поэтому достаточно все ссылки, размещенные на страницах, заменить с

Код:

http://enirin.ru/...

на

Код:

http://thepastworld.rolka.su/...

и проблема с авто подстановкой решится сама собой.

Вот пример успешной реализации: тык.

0

Поделиться202010-10-25 14:13:57

Автор: ЖенЯ3
Форумчанин
Зарегистрирован: 2010-10-17
Приглашений: 0
Сообщений: 20
Уважение: 0
Позитив: +2
Провел на форуме:
5 часов 13 минут
Последний визит:
2010-12-24 13:43:57

Спасибо) У меня теперь все по-новому)

0

Поделиться212010-11-05 15:44:54

Автор: mr_m
Новичок
Зарегистрирован: 2010-11-05
Приглашений: 0
Сообщений: 9
Уважение: 0
Позитив: 0
Пол: Женский
Возраст: 29 [1995-09-09]
Провел на форуме:
6 часов 39 минут
Последний визит:
2010-11-26 17:42:33

Ви написал(а):

она идёт вместе с ФШ, и отдельно, кажется, скачать нельзя.

А как ее запустить?

0

Поделиться222010-12-07 17:01:15

Автор: draga13542453
Новичок
Зарегистрирован: 2010-11-22
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: +2
Пол: Женский
Провел на форуме:
10 часов 19 минут
Последний визит:
2011-01-04 20:33:49

Спасибо вам.

0

Поделиться232010-12-24 00:00:19

Автор: Iosh.
Новичок
Зарегистрирован: 2010-12-23
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: +1
Провел на форуме:
1 час 36 минут
Последний визит:
2010-12-25 22:17:00

Спасибо большое, всё крайне толково %)

Отредактировано Iosh. (2010-12-24 00:03:59)

0

Поделиться242011-04-27 21:47:52

Автор: iceTetka
Новичок
Зарегистрирован: 2011-02-01
Приглашений: 0
Сообщений: 12
Уважение: 0
Позитив: 0
Провел на форуме:
11 часов 11 минут
Последний визит:
2011-11-29 14:50:33

спс

0

Поделиться252011-09-04 19:00:59

Автор: Barbariso4ka
Форумчанин
Зарегистрирован: 2010-06-17
Приглашений: 0
Сообщений: 172
Уважение: +35
Позитив: +16
Пол: Женский
Провел на форуме:
4 дня 12 часов
Последний визит:
2011-11-14 23:54:47

А как можно сделать так, что бы ссылки были без pages/?
У меня из-за них при переходе пишется что ссылка неверная или устаревшая...

0

Поделиться262011-09-14 16:16:51

Автор: Джула
Форумчанин
Зарегистрирован: 2011-07-01
Приглашений: 0
Сообщений: 140
Уважение: +2
Позитив: +13
Пол: Женский
Провел на форуме:
3 дня 9 часов
Последний визит:
2013-03-16 17:03:49

Мап-карты создают только через фотошоп?Можно через пэйнт?

0

Поделиться272011-10-10 19:54:21

Автор: SAYminusPLZ
Новичок
Зарегистрирован: 2011-10-10
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: +1
Пол: Мужской
Возраст: 34 [1990-08-28]
Провел на форуме:
1 час 23 минуты
Последний визит:
2011-10-11 08:03:17

через фотошоп лучше

0

Поделиться282012-02-11 19:51:30

Автор: Милиастана
Новичок
Зарегистрирован: 2012-02-11
Приглашений: 0
Сообщений: 10
Уважение: 0
Позитив: +2
Провел на форуме:
1 час 59 минут
Последний визит:
2012-03-14 22:22:09

Подскажите пожалуйста. Мне нужно, чтобы при наведении на место которое бы перекидывало всплывала подсказка (т.к. у меня картинки), делала в Adobe Dreamweaver и прописывала в строке alt, но при наведении курсором ничего нигде не всплывает
ссылка - http://probnia.0pk.ru/

0

Поделиться292012-02-11 20:03:10

Автор: Leonheart
Можно просто "Рой"
Откуда: ЕТП
Зарегистрирован: 2011-12-22
Приглашений: 0
Сообщений: 1787
Уважение: +450
Позитив: +104
Пол: Мужской
Возраст: 37 [1987-01-01]
Провел на форуме:
19 дней 19 часов
Последний визит:
2013-05-19 12:36:39

Милиастана,

Всплыв. подсказки на мап-карте при наведении на области

0

Поделиться302012-02-11 22:22:08

Автор: close_fever
Администратор
Зарегистрирован: 2011-07-17
Приглашений: 0
Сообщений: 650
Уважение: +107
Позитив: +41
Провел на форуме:
5 дней 0 часов
Последний визит:
2021-01-20 22:34:15

Leonheart
А зачем мучить мозг мепкартой, если можно нарезать картинки и устроить кучу гиперссылок. Единственное что - через альт у вас всплывать будет только текст.

0

Ищу скрипт	Архив тем	2011-11-08
Создай красивое графическое объявление!	Оформление форумов	2013-02-06
Я не нашла тут этой темы...или я слепая....х)	Архив тем	2009-11-16
Вопросы насчет форума 8 <	Архив тем	2012-01-22

Форум поддержки пользователей ZeroParking

Меню навигации

Пользовательские ссылки

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

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

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

Поделиться12009-01-04 00:10:40

Поделиться22009-01-04 15:10:56

Поделиться32009-01-06 23:45:45

Поделиться42009-08-15 15:23:42

Поделиться52010-04-17 10:26:05

Поделиться62010-04-25 10:45:03

Поделиться72010-04-25 12:14:49

Поделиться82010-04-25 13:38:57

Поделиться92010-04-25 17:37:43

Поделиться102010-05-12 22:03:54

Поделиться112010-05-12 22:57:31

Поделиться122010-05-13 01:10:44

Поделиться132010-05-13 01:18:29

Поделиться142010-05-13 01:32:34

Поделиться152010-05-13 12:29:28

Поделиться162010-05-25 15:37:45

Поделиться172010-06-18 00:25:32

Поделиться182010-06-22 20:00:43

Поделиться192010-09-25 10:40:51

Поделиться202010-10-25 14:13:57

Поделиться212010-11-05 15:44:54

Поделиться222010-12-07 17:01:15

Поделиться232010-12-24 00:00:19

Поделиться242011-04-27 21:47:52

Поделиться252011-09-04 19:00:59

Поделиться262011-09-14 16:16:51

Поделиться272011-10-10 19:54:21

Поделиться282012-02-11 19:51:30

Поделиться292012-02-11 20:03:10

Поделиться302012-02-11 22:22:08

Похожие темы