Всплывающий список при наведении на область 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, время: 05:06. |