ID элемента, связные события.
 

Здравствуйте, уважаемые, вопрос собственно такой.
Делаю интерактивную карту, на примере
http://htmlbook.ru/example/raphael/ <- демо карты
http://htmlbook.ru/blog/postroenie-i...arty-s-raphael <- статья с кодом и тп.
С боку от карты хочу разместить таблицу со списком стран.
структура те такая:
<tr id="2">
<td><input type="checkbox"></td>
<td>Нога</td>
</tr>
Так как же подвязать эту строку и события мышеклика мышенавединия чтобы они были аналогичны тем же событиям на карте. Те на карте например рука человека навожу на нее подсвечивается в таблице, подсвечивается на карте.
как сроднить table id с map id?)

Ну во время инициализации создавать таблицу с совпадающими id и там где на hover и click навешиваются обработчики прописать выделение соответствующих строк в таблице.

те я могу создать вторую канву текст взять Имена таблицы из paths[country].name, и засунуть эту вторую канву перед событием ховер, правильно?

var r = Raphael('map', 220, 220),
		attributes = {
			fill: '#3a75c4',
            stroke: '#3b5998',
            'stroke-width': 2,
            'stroke-linejoin': 'round'
        },

		arr = new Array();
	
	for (var country in paths) {
		
		var obj = r.path(paths[country].path);
		
		obj.attr(attributes);
		obj.attr('title', paths[country].name);
		
		arr[obj.id] = country;
        
        obj
		.hover(function(){
			document.location.hash = arr[this.id];
			var activhash = window.location.hash.split('#')[0];
			this.animate({
				fill: '#003399'
				}, 300);
		}, function(){
			this.animate({
				fill: attributes.fill,
			}, 300);

				})

Ну вот же:

arr[obj.id] = country;

obj.id - это и есть id страны. Тут можно и создавать вашу таблицу построчно и писать этот id куда надо.
А на ховере и клике висят обработчики, которые и работают с этими id через this.id. Ничто не мешает прямо в эти обработчики вписать код для работы с вашей таблицей.

Получилось создать массив обьектов с тем же id, теми же атрибутами, но событие ховер подвесить не получается( пробовали this.id и...в общем не вышло. Помогите обьединить их obj и hover чтобы менялись вместе.(

$(function(){
	
	var r = Raphael('map', 820, 420),
		attributes = {
			fill: '#3a75c4',
            stroke: '#3b5998',
            'stroke-width': 2,
            'stroke-linejoin': 'round'
        },
        attribut = {
			fill: '#000',
         },

		arr = new Array();
	
	for (var country in paths) {
		

		var obj = r.path(paths[country].path);
		var t = r.text(paths[country].x, paths[country].y, paths[country].name);
        obj.attr(attributes);
		t.attr(attribut);
		obj.attr('title', paths[country].name);
		
		arr[obj.id] = country;
		arr[t.id] = country;

        obj
        .hover(function(){
			this.animate({
				fill: '#003399',
				}, 300);
		}, function(){
			this.animate({
				fill: attributes.fill,
			}, 300);
				})

		.click(function(){
			document.location.hash = arr[this.id];
			
			var point = this.getBBox(0);
			
			$('#map').next('.point').remove();
			
			$('#map').after($('<div />').addClass('point'));
			
			$('.point')
			.html(paths[arr[this.id]].name2)
			.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
			.css({
				left: point.x+(point.width/2)-80,
				top: point.y+(point.height/2)-20
			})

			.fadeIn();
			
		});
		t
        .hover(function(){
			this.animate({
				fill: '#003399',
				}, 300);
		}, function(){
			this.animate({
				fill: attribut.fill,
			}, 300);
				})

		
		
		$('.point').find('.close').live('click', function(){
			var t = $(this),
				parent = t.parent('.point');
			
			parent.fadeOut(function(){
				parent.remove();
			});
			return false;
		});

Вот модифицированный пример с htmlbook с таблицей стран и выделением их по ховеру: http://learn.javascript.ru/play/JHG4C

jsnb,
Большое спасибо!
Я так понимаю эти строчки

var newRow = '<tr id="'+ obj.id +'"><td>' + paths[country].name + '</td></tr>';
		table.append(newRow);

придают элементам таблицы такой же id как и у элементов dom?
Таким образом мы и ищем в ховере их по ид...
вопрос этот ли вариант лучше или все же лучше генерировать дом элементы? Нужно же еще и обратное взаимодействие. Я правда хочу научиться, так что буду рад даже ссылкой в текст учебника где про это пишут...

Там идет цикл. На каждой итерации цикла будет свой id. Соответственно эта строка:

var newRow = '<tr id="'+ obj.id +'"><td>' + paths[country].name + '</td></tr>';

создает строковую переменную newRow и присваивает ей строку вида:
'<tr id="0"><td>Iceland</td></tr>'
На каждой итерации цикла в этой строке будет новый id и название страны.
Дальше идет:

table.append(newRow);

table - это объект jQuery, который связан с tbody таблицы. Он был создан выше (var table = $('#country-table > tbody')).
append - это метод jQuery объекта, который при передаче ему строки newRow создает новый DOM элемент и вставляет его в конец tbody таблицы. Таким образом на каждой итерации цикла формируется новая строка таблицы.
А если реально хочешь научиться и понимать, что происходит, то вот учебник: http://learn.javascript.ru/
Там во второй части есть целые большой раздел посвещенный DOM. А дальше еще один большой раздел посвещенный событиям. Если реально хочешь научиться - то читай. Там есть практические задачи, в том числе и на таблицы, их сортировку, с описанием того как и что делать лучше. Нельзя в двух словах рассказать о том, о чем пишут целые книги.