Всплывающий список при наведении на область svg изображения
Добрый день.
Задача: 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('Закрыть'))
Вобщем у меня банально не хватает знаний на реализацию этой идеи и я обратился к Вам. Все что я мог почерпнул из уроков, примеров, рабочих сайтов. Зарание благодарю за помощь. Спасибо. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
$('.point').append('<ul />');
var o=$('.point > ul');
for (var i=0; i<3; i++) {
o.append('<li>Item '+i+'</li>');
};
});
</script>
</head>
<body>
<div class="point"></div>
</body>
</html>
|
А могу ли я сделать так:
Создать несколько <div>, выставить display=none а при наведении на конкретный регион выставлять для нужного блока display=block? |
Цитата:
В этом есть один недостаток - контента дофига грузится. Но потом есть преимущество - показывается сразу. :D |
а Вы можете мне показать пример кода для обработки реакции при нажатии на такой регион? а то я совсем печален в джаве.
|
Цитата:
Это форум по JavaScript. |
ок. совсем печален в JavaScript :(
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.info {
display: none;
}
.info.on {
display: block;
}
</style>
<script type="text/javascript">
$(function (){
$('#map > a').click(function (){
var id=$(this).data('info');
$('#info > .on').removeClass('on');
$('#'+id).addClass('on');
});
});
</script>
</head>
<body>
<div id='map'>
<a href='#' data-info='itm1'>1</a>
<a href='#' data-info='itm2'>2</a>
<a href='#' data-info='itm3'>3</a>
</div>
<div id='info'>
<div class='info' id='itm1'>один</div>
<div class='info' id='itm2'>два</div>
<div class='info' id='itm3'>три</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:08. |