Интерактивная карта с комментарием

[Deff]

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

[Deff]

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

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

[tsigel]

$('.area1').hover(function() {
  $(this).find('.comment').css('display', 'block');
}, function() {
  $(this).find('.comment').css('display', 'none');
});

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

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

[Deff]

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

[tsigel]

Для того чтобы отображать комментарии в карте с использованием 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]

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

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

[tsigel]

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

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

[Deff]

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

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

[tsigel]

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

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

[Deff]

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