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

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

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


Вы здесь » Форум поддержки пользователей ZeroParking » Оформление форумов » FAQ по созданию MAP-карт (карта изображения)


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

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

1

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

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

Выбираем из списка - HTML (обведено красным на скриншоте 1.)
http://s54.radikal.ru/i146/0901/51/bb77fa6ff726t.jpg

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

Скриншот 2
http://s45.radikal.ru/i110/0901/e9/4916ffa0328dt.jpg

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

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

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

Скриншот 3
http://s39.radikal.ru/i083/0901/9d/8ba91fb4a746t.jpg

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

Скриншот 4
http://i029.radikal.ru/0901/2c/49b1ccbc613at.jpg

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

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

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

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

+4

2

А вы не подскажите где это можно сделать на заказ ??? Просто у меня такой программы нема ... https://forumupload.ru/uploads/0002/25/06/8548-1.gif

0

3

~ Ren ~
я давным давно создал тему Создай красивое графическое объявление! однако наставили плюсов и ничего не сказали  https://forumupload.ru/uploads/0002/25/06/8547-2.gif

+1

4

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

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

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

Допустим вам  надо выделить семь областей (как на скриншоте 1.)
http://s51.radikal.ru/i131/0810/47/c0a8e806cabf.gif

Работать мы будем с помощью инструмента Rectangle Image Map Tool. Этот инструмент позволяет выполнить только прямоугольные выделения. На Скриншоте 2 видно, как выглядит его значок.
http://s44.radikal.ru/i104/0810/64/f79db0257943.gif

Этим инструментом необходимо выделить область № 1.
http://i073.radikal.ru/0810/35/1fc813c9dd7b.gif

Теперь необходимо дважды кликнуть мышкой по выделенной области. В правом нижнем углу, рядом с панелью слоев, появится небольшое окно.
http://s44.radikal.ru/i105/0810/dc/ad12315808cd.gif

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

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

http://i078.radikal.ru/0810/2e/ecfa48ea1a5d.gif

http://s51.radikal.ru/i134/0810/d6/bde5e8cac956.gif

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

http://i002.radikal.ru/0810/79/9c6d92ea0b6a.gif

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

http://s43.radikal.ru/i101/0810/a0/6a9621bfa45b.gif

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

<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">
<!-- ImageReady Slices (ba6bec4dbd39.jpg) -->

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

(с) Nataly, Yuki

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

+3

5

Товарищи! А какие еще проги для работы с HTML вы можете посоветовать??? :question:
Я привыкла до всего сама доходить... Так сказать, "через тернии к звездам"!  https://forumupload.ru/uploads/0002/25/06/8547-1.gif

0

6

Интересный урок...  https://forumupload.ru/uploads/0002/25/06/8547-2.gif  А не подскажете где скачать эту программу?

0

7

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

0

8

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

0

9

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

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

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

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

0

10

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

Код:
<!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

11

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

0

12

https://forumupload.ru/uploads/0002/25/06/8547-5.gif в нём и создавалось.

0

13

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

0

14

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

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

0

15

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

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

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

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

0

16

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

0

17

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

0

18

Блин как все сложно... но понятно))))))) https://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

19

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

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

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

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

Код:
http://enirin.ru/...

на

Код:
http://thepastworld.rolka.su/...

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

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

0

20

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

0

21

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

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

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

0

22

Спасибо вам.

0

23

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

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

0

24

спс

0

25

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

0

26

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

0

27

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

0

28

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

0

29

Милиастана,

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

0

30

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

0


Вы здесь » Форум поддержки пользователей ZeroParking » Оформление форумов » FAQ по созданию MAP-карт (карта изображения)


Рейтинг форумов | Создать форум бесплатно