Добрый день.
Задача:
1. сделать на странице интерактивную карту, с регионами сложной формы; (готово)
2. при наведении на регион он подсвечивается; (готово)
3. при нажатии на регион всплывает список (для каждого региона свой) со ссылками (в дальнейшем ссылки на материалы сайта). (прошу помощи с этим пунктом)
Вот как примерно я хочу это реализовать:
http://novaposhta.ua/map/
Рассматривал рещения и через чистый CSS и с множеством изображений с разным состояние карты сделанными в Addobe Fireworks. Но эти решения не радовали. А так как сайт делается для себя, то хочется сделать все максимально удобно и функционально, без полумер и постоянной подгрузки кучи изображений.
Решение:
1. карту я нарисовал в inkscape, и засунул в файл.js. Для обработки использую raphael.js (библиотека JavaScript, которая упрощает работу с векторной графикой в веб проектах. Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы).
Вот его сокращенный код:
var paths = {
lenin: {
name: 'Ленинский',
path: 'm 182.5 ... 42 z'
},
dzerg: {
name: 'Дзержинский',
path: 'm 301.8 ... 73 z'
},
...
}
по логике вещей я понимаю что в переменные lenin и dzerg мне нужно вставить массивы с соответствующими значениями.
2. подсветку при наведении на регион я реализовал.
3. при нажатии на конкретный регион карты я вывожу окошко с именем области и кнопкой закрыть (а нужно вывести все эл-ты массива).
$(function(){
var r = Raphael('map', 721, 700),
attributes = {
fill: '#ddd', stroke: '#333', 'stroke-width': 1.2, 'stroke-linejoin': 'round'
},
arr = new Array();
for (var country in paths) {
var obj = r.path(paths[country].path);
obj.attr(attributes);
arr[obj.id] = country;
// Oбработчик события hover
obj.hover(function(){
this.animate({
fill: '#1669AD'
},300);
},function(){
this.animate({
fill: attributes.fill
}, 300);
});
// Oбработкa события click
obj.click(function(){
document.location.hash = arr[this.id];
// Изменяем хэш документа (#)
var point = this.getBBox(0);
// возвращаем размеры элемента
$('#map').next('.point').remove();
$('#map').after($('<div />').addClass('point'));
// Удаляем существующий div 'point' и создаем другой
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
// выводим список при нажатии
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
// где всплывает окно
.fadeIn();
});
// Oбработкa события click для кнопки закрытия
$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');
parent.fadeOut(function(){
parent.remove();
});
return false;
});
}
});
Вопрос. Как мне вывести в это всплывающее окно не одно значение, а задыный зарание список наименований оформленных как ссылка.
Как я понимаю вывод будет выполняться в этом блоке:
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
Вобщем у меня банально не хватает знаний на реализацию этой идеи и я обратился к Вам. Все что я мог почерпнул из уроков, примеров, рабочих сайтов. Зарание благодарю за помощь. Спасибо.
