Единый форум поддержки

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

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

Карты

Страница: 1 2  

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

1

  • Автор: kalduz
  • Заслуженный
  • Зарегистрирован: Ср, 22 Янв 2014
  • Сообщений: 22
  • Уважение: 0
  • Позитив: -1
  • Последний визит:
    Сб, 11 Июл 2015 01:07:12

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

0

2

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Есть стандартный функционал Мап-Карт http://htmlbook.ru/html/map , в своё время поддерживался и тут => Заказ МАР-карт (2) Cейчас достаточно много есть онлайн сервисов в инете оцифровки своей картинки
Есть какой-то скриптец(ищите в каталоге скриптов и css кодов) дающий всплывающую подсказку при наведении на мап-карту(т.е можно не делать явных, грубых подписей по карте)

Отредактировано Deff (Вт, 9 Дек 2014 20:01:40)

0

3

  • Автор: nebelka
  • Заслуженный
  • nebelka
  • Зарегистрирован: Чт, 22 Ноя 2012
  • Сообщений: 84
  • Уважение: +76
  • Позитив: +39
  • Пол: Мужской
  • Последний визит:
    Сб, 16 Янв 2021 01:24:20
kalduz написал(а):

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

с 2006 года скрипт
http://xhtml.ru/2006/08/23/cursor-coordinates/
по координатам курсора на картинке можно собрать всплывающие подсказки

Для заморочек можно использовать flash (вставлять в пост как HTML)
http://www.elisdn.ru/blog/5/interaktivn … v-vo-flash

Отредактировано nebelka (Ср, 17 Дек 2014 09:12:03)

0

4

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35

Здравствуйте!
Помогите сориентироваться по созданию карты-изображения.

Тестирую на отдельной странице форума, впоследствии вставлю в пост с включённым HTML.

Пытаюсь применить "подсветку" элемента при наведении курсора путём события "onmouseover" и появления выделенного изображения поверх карты. Как только не пробовала его активировать (в том числе и в паре с "onmouseout") - ничего не выходит.
Перемещение "img" на позицию после "map" также не решает.
Пробовала ещё и в варианте java-скрипта прописывать - вообще не отображается карта и всё пропадает со страницы.

Кто сталкивался и/или знает наверняка, как правильнее составить данный html-код, подскажите, пожалуйста!

Отредактировано Grey_Fox (Чт, 29 Окт 2015 18:54:25)

0

5

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Grey_Fox
1. Создайте картинку нужную map-карты с нужными <area
2. Создайте на прозрачке(с размерами  map-карты )  картинки нужных областей с подстветкой по кол-ву - <area .  На каждой прозрачке - одна область с подсветкой (при наложении этих прозрачек на мап-карту границы областей должны совпадать с текущими на мап карте).
3. Выложите коды и ссылки, сделаем так, чтобы при наведении на область, всплывала нужная прозрачка с подстветкой

Отредактировано Deff (Чт, 29 Окт 2015 16:45:43)

0

6

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

2. Создайте на прозрачке(с размерами  map-карты )

А вот и моя ошибка. Я сделала их отдельными элементами, по размеру выделяемой области. И как раз ссылки на изображения кинула под "onmouseover".

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

3. Выложите коды и ссылки, сделаем так, чтобы при наведении на область, всплывала нужная прозрачка с подстветкой

Если не затруднит, пришлите мне просто пример рабочего кода с внедрением таких изображений. Заранее спасибо!

0

7

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29
Grey_Fox написал(а):

Если не затруднит, пришлите мне просто пример рабочего кода с внедрением таких изображений. Заранее спасибо!

Пока кода нет, будут картинки и сама мап карта - отлажу и  нарисую

0

8

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

Пока кода нет, будут картинки и сама мап карта - отлажу и  нарисую

Ок, тогда, как понимаю, достаточно будет одну-две группы <area> + <img> для пробы прислать?
(Просто что картинки с прозрачкой сейчас в процессе.)

Отредактировано Grey_Fox (Чт, 29 Окт 2015 18:54:52)

0

9

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Grey_Fox
Ок, к ночи гляну
Перезагрузите все картинки и мап-карту на http://savepic.ru/
У меня не открываются

Отредактировано Deff (Чт, 29 Окт 2015 18:57:50)

0

10

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

Grey_Fox
Ок, к ночи гляну
Перезагрузите все картинки и мап-карту на http://savepic.ru/
У меня не открываются

ОК, пожалуйста.

0

11

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Ок

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

ОК, пожалуйста.

Да, пойдёт

0

12

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Grey_Fox

Свернутый текст

<style type="text/css">
#map-wrap {
  position:relative;
  display:inline-block;
}
img.map {
  border:0 none;
  position:absolute;
  left:0;
  top:0;
}
img.map.Нирн,
img.map.Мессер{
  opacity:0;
  background-color:rgba(0,0,0,0);
}
</style>
<center>
<div id=map-wrap style="height:640px;width:640px">
<img class="map" src="http://savepic.su/6328329.jpg">
<img class="map Нирн" src="http://savepic.su/6309897.png">
<img class="map Мессер" src="http://savepic.su/6308873.png">
<img class="map" src="/i/blank.gif" height="640" width="640" usemap="#Universe640">
  <map name="Universe640">

  <area shape="circ" coords="325,319,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1169" alt="Нирн" title="Нирн">
  <area shape="circ" coords="326,350,9" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1170" alt="Мессер" title="Мессер">

  </map>
</div>
</center>
<script type="text/javascript">
$('map[name="Universe640"] area').mouseenter(function() {
   $('img.map').css({"background-color":"rgba(0,0,0,0)"});
   var cl=$(this).attr('alt');
   $('img.map.'+cl).css({"background-color":"rgba(0,0,0,.75)"}).stop().animate( {"opacity":1}, 1500);
}).mouseleave(function() {
   $('img.map').css({"background-color":"rgba(0,0,0,0)"});
   var cl=$(this).attr('alt');
   $('img.map.'+cl).stop().animate( {"opacity":0}, 1000);/**/
});
</script>

Красным - коэффициент затемнения картинки,
Зеленым время затемнения и возврата
=============================
В стопке картинок(в блоке <div id=map-wrap>) первой лежит карта, последней - прозрачка размером с карту, меж ними картинки с классом соответствующим атрибуту alt и рисунком на прозрачке размером с карту соответсвующим картинке нужного <area>

Отредактировано Deff (Пт, 30 Окт 2015 14:50:55)

0

13

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

Grey_Fox
Свернутый текст
Красным - коэффициент затемнения картинки,
Зеленым время затемнения и возврата
=============================
В стопке картинок(в блоке <div id=map-wrap>) первой лежит карта, последней - прозрачка размером с карту, меж ними картинки с классом соответствующим атрибуту alt и рисунком на прозрачке размером с карту соответсвующим картинке нужного <area>

Вау, Deff, спасибо! Это даже больше, чем я хотела! :cool:

+

"Плюсануть" не получилось, требуют 1 сообщения даже после написания этого сообщения.(

P.S. Только это норма, что я и старый код карты должна оставить для работы, и новый скрипт выше прописать?)
Ибо если удаляю всё старое, на странице снова пусто))))

Отредактировано Grey_Fox (Пт, 30 Окт 2015 14:47:24)

0

14

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Подправил код (центровка)

0

15

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

Подправил код (центровка)

Всё супер, благодарю!  :cool:

0

16

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35

Ещё вопрос вдогонку, на будущее: чтобы сделать кликабельными такие области, как, например, http://savepic.su/6303622.png и http://savepic.su/6306694.png , читала, что потребуется сделать как бы "карту в карте"... Можете ли, во избежании моих ошибок, "ткнуть пальцем" в места, куда можно и нужно вставлять такой нижний слой карты? (А области выделения "area", получается, будут большие "circ"и?)
Или лучше с этим не заморачиваться? :D

Отредактировано Grey_Fox (Пт, 30 Окт 2015 19:06:17)

0

17

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Grey_Fox
Да вообщем пофег какие области
Просто ставите последущие следом за последней, сейчас последняя <img class="map Мессер" src="http://savepic.su/6308873.png">
Можно уменьшить затенение, если нужно видеть планеты, а можно область нарисовать совместно с планетами(без дырок)

Отредактировано Deff (Пт, 30 Окт 2015 20:37:39)

0

18

  • Автор: Grey_Fox
  • Заслуженный
  • Grey_Fox
  • Зарегистрирован: Сб, 3 Окт 2015
  • Сообщений: 97
  • Уважение: +9
  • Позитив: +25
  • Последний визит:
    Пт, 27 Сен 2024 14:04:35
Deff написал(а):

Grey_Fox
Да вообщем пофег какие области
Просто ставите последущие следом за последней, сейчас последняя <img class="map Мессер" src="http://savepic.su/6308873.png">

ОК, вот на сегодня такой код с результатом:

Код:

<style type="text/css">
#map-wrap {
  position:relative;
  display:inline-block;
}
img.map {
  border:0 none;
  position:absolute;
  left:0;
  top:0;
}
img.map.Нирн,
img.map.Мессер,
img.map.Акатош,
img.map.Апокриф,
img.map.Секунда,
img.map.Дибелла,
img.map.АНУ,
img.map.ПАНДОМАЙ,
img.map.Аркей,
img.map.Вечнотень,
img.map.Вороний Лес,
img.map.Дрожащие Острова\План Порядка,
img.map.Загубленные Бездны Намиры,
img.map.Зенитар,
img.map.Зольник,
img.map.Каирн Душ,
img.map.Кинарет,
img.map.Лунная Тень,
img.map.МАГНУС,
img.map.Мара,
img.map.Мёртвые Земли{
  opacity:0;
  background-color:rgba(0,0,0,0);
}
</style>
<center>
<div id=map-wrap style="height:640px;width:640px">
<img class="map" src="http://savepic.su/6328329.jpg">
<img class="map Нирн" src="http://savepic.su/6309897.png">
<img class="map Мессер" src="http://savepic.su/6308873.png">
<img class="map Акатош" src="http://savepic.su/6337391.png">
<img class="map Апокриф" src="http://savepic.su/6303599.png">
<img class="map Секунда" src="http://savepic.su/6306671.png">
<img class="map Дибелла" src="http://savepic.su/6294383.png">
<img class="map АНУ" src="http://savepic.su/6295407.png">
<img class="map ПАНДОМАЙ" src="http://savepic.org/7836283.png">
<img class="map Аркей" src="http://savepic.org/7802491.png">
<img class="map Вечнотень" src="http://savepic.org/7804539.png">
<img class="map Вороний Лес" src="http://savepic.org/7857786.png">
<img class="map Дрожащие Острова\План Порядка" src="http://savepic.org/7852666.png">
<img class="map Загубленные Бездны Намиры" src="http://savepic.org/7844474.png">
<img class="map Зенитар" src="http://savepic.org/7826042.png">
<img class="map Зольник" src="http://savepic.org/7854717.png">
<img class="map Каирн Душ" src="http://savepic.org/7847549.png">
<img class="map Кинарет" src="http://savepic.org/7836285.png">
<img class="map Лунная Тень" src="http://savepic.org/7815805.png">
<img class="map МАГНУС" src="http://savepic.org/7801469.png">
<img class="map Мара" src="http://savepic.org/7840380.png">
<img class="map Мёртвые Земли" src="http://savepic.org/7816828.png">
<img class="map" src="/i/blank.gif" height="640" width="640" usemap="#Universe640">
  <map name="Universe640">
  <area shape="circ" coords="325,319,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1169" alt="Нирн" title="Нирн">
  <area shape="circ" coords="326,350,9" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1170" alt="Мессер" title="Мессер">
  <area shape="circ" coords="253,320,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1193" alt="Акатош" title="Акатош">
  <area shape="circ" coords="204,445,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1187" alt="Апокриф" title="Апокриф">
  <area shape="circ" coords="324,288,9" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1171" alt="Секунда" title="Секунда">
  <area shape="circ" coords="325,245,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1195" alt="Дибелла" title="Дибелла">
  <area shape="RECT" coords="51,563,104,589" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1167" alt="АНУ" title="АНУ">
  <area shape="RECT" coords="467,47,594,75" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1168" alt="ПАНДОМАЙ" title="ПАНДОМАЙ">
  <area shape="circ" coords="272,270,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1194" alt="Аркей" title="Аркей">
  <area shape="circ" coords="389,475,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1183" alt="Вечнотень" title="Вечнотень">
  <area shape="circ" coords="388,507,9" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1193" alt="Вороний Лес" title="Вороний Лес">
  <area shape="circ" coords="171,386,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1188" alt="Дрожащие Острова\План Порядка" title="Дрожащие Острова\План Порядка">
  <area shape="circ" coords="441,444,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1181" alt="Загубленные Бездны Намиры" title="Загубленные Бездны Намиры">
  <area shape="circ" coords="376,270,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405&p=2#p1196" alt="Зенитар" title="Зенитар">
  <area shape="circ" coords="387,167,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1174" alt="Зольник" title="Зольник">
  <area shape="circ" coords="212,490,9" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1186" alt="Каирн Душ" title="Каирн Душ">
  <area shape="circ" coords="326,392,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405&p=2#p1199" alt="Кинарет" title="Кинарет">
  <area shape="circ" coords="156,319,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1189" alt="Лунная Тень" title="Лунная Тень">
  <area shape="circ" coords="49,318,16" href="http://tesroll.forumbb.ru/viewtopic.php?id=405&p=2#p1201" alt="МАГНУС" title="МАГНУС">
  <area shape="circ" coords="375,373,16" href="http://tesroll.forumbb.ru/viewtopic.php?id=405&p=2#p1198" alt="Мара" title="Мара">
  <area shape="circ" coords="487,321,17" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1177" alt="Мёртвые Земли" title="Мёртвые Земли">
  </map>
</div>
</center>
<script type="text/javascript">
$('map[name="Universe640"] area').mouseenter(function() {
   $('img.map').css({"background-color":"rgba(0,0,0,0)"});
   var cl=$(this).attr('alt');
   $('img.map.'+cl).css({"background-color":"rgba(0,0,0,.40)"}).stop().animate( {"opacity":1}, 1000);
}).mouseleave(function() {
   $('img.map').css({"background-color":"rgba(0,0,0,0)"});
   var cl=$(this).attr('alt');
   $('img.map.'+cl).stop().animate( {"opacity":0}, 700);/**/
});
</script>

Результат:
http://tesroll.forumbb.ru/pages/universe

Что-то у меня пошло не так.))))
Сначала такое проявилось, когда я писала знаки скобок в некоторых названиях, теперь, возможно из-за слеша в названии "Дрожащие Острова\План Порядка"?

Отредактировано Grey_Fox (Вс, 1 Ноя 2015 19:12:37)

0

19

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11346
  • Уважение: +7773
  • Позитив: +5556
  • Пол: Мужской
  • Последний визит:
    Сегодня 12:11:58

Grey_Fox
Попробуйте убрать обратные слеши \ в названиях

0

20

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51442
  • Уважение: +15403
  • Позитив: +11960
  • Последний визит:
    Сегодня 12:37:29

Grey_Fox
Я же предупреждал, что удобней выложить полную карту и ссылки на картинки
1. Все alt в <аrea должен состоять из одного слова (оно никак Вам не вредит и нигде не участвует - сокращайте или объединяйте через нижнее подчеркивание)
Пример
<area shape="circ" coords="171,386,18" href="http://tesroll.forumbb.ru/viewtopic.php?id=405#p1188" alt="Дрожащие_Острова" title="Дрожащие Острова\План Порядка">
Cоотстветственно в классе картинок и стиле для оных тоже одно слово  (без всяких слешей)

img.map.Дрожащие_Острова,

и

<img class="map Дрожащие_Острова" src="http://savepic.org/7852666.png">

Отредактировано Deff (Вс, 1 Ноя 2015 19:35:30)

0

Страница: 1 2