Приветствую. Сразу сообщу, что я - дилетант в области JS.
Есть интерактивная карта SVG на HTML-странице. Так же присутствует таблица. При наведении на определенную строку, она подсвечивается определенным цветом, этим же цветом подсвечивается и область на карте, которая соответствует строке в таблице. Скрипт работает только по принципу: одна строка - одна область.
Задача. Необходимо сделать так, что бы при наведении на строку могли подсвечиваться несколько областей на карте.
Скрипт:
<script type="text/javascript">
// Определим свои функции добавления/удаления класса, так как те, что в jQuery не работают для SVG
jQuery.fn.myAddClass = function (classTitle) {
return this.each(function() {
var oldClass = jQuery(this).attr("class");
oldClass = oldClass ? oldClass : '';
jQuery(this).attr("class", (oldClass+" "+classTitle).trim());
});
}
jQuery.fn.myRemoveClass = function (classTitle) {
return this.each(function() {
var oldClass = jQuery(this).attr("class");
var startpos = oldClass.indexOf(classTitle);
var endpos = startpos + classTitle.length;
var newClass = oldClass.substring(0, startpos).trim() + " " + oldClass.substring(endpos).trim();
if (!newClass.trim())
jQuery(this).removeAttr("class");
else
jQuery(this).attr("class", newClass.trim());
});
}
// Логика взаимодействия карты и таблицы
$(window).load(function () {
// Получаем доступ к SVG DOM
var svgobject = document.getElementById('imap');
if ('contentDocument' in svgobject) {
var svgdom = jQuery(svgobject.contentDocument);
// Устанавливаем соответствующим фигурам на карте, соответствующие классы (по таблице)
$("#data tr").each (function (index) {
var id = $(this).attr("id").substring(1);
var classes = $(this).attr("class");
$("#map #r"+id, svgdom).myAddClass(classes);
});
// Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы.
$("#data tr").hover(
function () {
var id = $(this).attr("id").substring(1);
$("#map #r"+id, svgdom).myAddClass("highlight");
},
function () {
var id = $(this).attr("id").substring(1);
$("#map #r"+id, svgdom).myRemoveClass("highlight");
}
);
// Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте
$("#map polygon", svgdom).add($("#map circle", svgdom)).add($("#map path", svgdom)).hover(
function () {
var id = $(this).attr("id").substring(1);
$("#data #d"+id).addClass("highlight");
},
function () {
var id = $(this).attr("id").substring(1);
$("#data #d"+id).removeClass("highlight");
}
);
}
});
</script>
Таблица:
<table id="data">
<tr id="d1" bgcolor="#000000">
<td>1</td>
</tr>
<tr id="#">
<td></td>
</tr>
<tr id="d2" class="orange">
<td>2</td>
</tr>
<tr id="#" class="red">
<td></td>
</tr>
<tr id="d3" class="purple">
<td>3</td>
</tr>
<tr id="d4" class="green">
<td>4</td>
</tr>
<tr id="d5" class="orange">
<td>1+2</td>
</tr>
<tr id="d6" class="red">
<td>2+4</td>
</tr>
<tr id="d7" class="orange">
<td>1+2+3+4</td>
</tr>
</table>
Карта svg:
<path id="r1" d="m 184.31777,877.17469 -7.88283,-6.20564 v -35.89204 l 27.00289,-1.17404 36.56292,3.18668 0.67088,7.37967 -3.18668,9.05687 4.69616,21.46814 -47.46471,3.52211z"></path>
<path id="r2" d="m 245.18111,874.99433 8.10732,28.23148 -16.36623,11.14801 -27.98861,24.43074 -21.34725,-9.96205 -5.6926,-5.21822 -2.60911,-10.19924 -3.32068,-4.50664 5.6926,-11.85959 1.66034,-10.19924 3.79506,-4.03225 0.20582,-5.65264 10.39863,1.34175 z"></path>
<path id="r3" d="m 182.31777,877.17469 -0.20582,5.65264 -3.79506,4.03225 -1.66034,10.19924 -5.6926,11.85959 -6.08904,-0.54784 -9.89547,9.05687 -6.87652,-0.33544 -14.25618,3.3544 -3.3544,-19.79094 11.06951,-15.2625 15.43023,1.67719 14.4239,-8.05055 z"></path>
<path id="r4" d="m 185.31777,877.17469 -10.90179,1.84491 -14.4239,8.05055 -15.43023,-1.67719 -7.21195,-6.37336 -22.8099,-8.38599 10.06319,-6.54107 11.74039,-1.50948 3.18668,-4.02528 0.67088,-4.52843 24.99025,-25.66113 12.24355,6.70879 v 35.89204 z"></path>
Все завязано на уникальный id. Понимаю, что надо привязаться к классам, но не понимаю как это сделать.
Заранее благодарен за помощь!
