Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Интерактивная карта с комментарием (https://javascript.ru/forum/misc/35262-interaktivnaya-karta-s-kommentariem.html)

Deff 06.02.2013 15:49

madwizard,
:) А чем не нравицо мой код ? Комментарии в титлах <area

Deff 06.02.2013 15:54

Цитата:

Сообщение от madwizard
вместо канваса нельзя использовать карту?

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

tsigel 06.02.2013 16:12

Цитата:

Сообщение от madwizard
$('.area1').hover(function() {
  $(this).find('.comment').css('display', 'block');
}, function() {
  $(this).find('.comment').css('display', 'none');
});

Этот код подходит для дивов а не для area, вы же не можете положить блок comment во внуторь area ($(this).find("это") означеет что мы ищем "это" внутри this. this при событии клик это то на что мы кликнули.)

сейчас немного занят, скоро напишу.

Deff 06.02.2013 16:19

tsigel,
Обрамить каждый area в span, в span всунуть картинку с position:absolute; top:0;left:0;display:none;
Всю карту обернуть в div c position:relative; тогда все картинки будут привязаны к левому верхнему углу карты
(Про картинки пост 12)
Отслеживаем наведение на span - разворачиваем картинку, при сходе курсора - сворачиваем

tsigel 06.02.2013 16:29

Для того чтобы отображать комментарии в карте с использованием area Вам надо научиться связывать элементы. Это можно делать с помощью data() или можно сделать просто и наглядно.

Добавляем арии и метке одинаковый класс (например <area class='area lebel1' /> будет соответствовать метке <label class='label label1'></label>), тогда мы можем написать:
$('.area').hover(function() {//наведение на область
  var class; //Объявляем переменную "class"
  class = $(this).attr('class');//записали в переменную класс арии (class = "area lebel1")
  class = class.replace('area ', '');//Удалили из переменной класс арии (class = "lebel1")
  $('.' + class).css('display', 'block');//показали метку
 }, function () {//потеря наведения на арию
  $('.label').each(function() {//цикл по всем элементам с классом label
    $(this).css('display', 'none');//скрываем все метки
  })
})


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

tsigel 06.02.2013 16:30

Цитата:

Сообщение от Deff
tsigel,
Обрамить каждый area в span, в span всунуть картинку с position:absolute; top:0;left:0;display:none;
Всю карту обернуть в div c position:relative; тогда все картинки будут привязаны к левому верхнему углу карты
(Про картинки пост 12)
Отслеживаем наведение на span - разворачиваем картинку, при сходе курсора - сворачиваем

Deff,
Мне проще канвасом попользоваться. :)

tsigel 06.02.2013 16:42

Цитата:

Сообщение от madwizard
п.с. а вместо канваса нельзя использовать карту?

canvas используется не вместо, а вместе с картой.

Deff 06.02.2013 16:51

Цитата:

Сообщение от tsigel
Мне проще канвасом попользоваться

Один фиг - пусть канвас, но при таком способе отпадает надобность позиционирования- привязки каждого

tsigel 06.02.2013 16:57

Deff,
А я и не писал, что для канваса нужна привязка, я говорил что можно сделать блоками или, как альтернатива, канвасом и map area.

Просто это сложнее и требует больших навыков. Но качество работы того стоит.

Deff 06.02.2013 17:01

tsigel,
:) Если не нужна - то как канва всплывет в нужной области ?-(вычислять крайние точки по area - геммор)
Тут она всплывет в нужном span


Часовой пояс GMT +3, время: 15:31.