Помогите с Raphael. JS (считать цвет для каждого элемента)

[ufaclub]

Живой пример:

Для просмотра ссылки Войди или Зарегистрируйся




[JS]



<script type="text/javascript">

jQuery(document).ready(function(){

var R = Raphael("mapPaper", 780, 463);

var attr = {
stroke: "#74675C",
"stroke-width": 1,
fill: "#FC0",
"fill-opacity": 0.2
},
i = 1,
area = {};




var oAreas = $(".mapArea");


$.each(oAreas, function(){
area = R.path($(this).attr("data-path")).attr(attr);
i++;
});



for (var j=1; j<i; j++) {
(function (o, j) {
o[0].style.cursor = "pointer";
o[0].onmouseover = function () {
var color = "#FCE588";
o.animate({fill:color}, 250);
};
o[0].onmouseout = function () {
var color = "#FC0";
o.animate({fill: color}, 250);
};
o[0].onclick = function () {
var color = "#F00";
o.animate({fill: color}, 250);
};
})(area[j], j);
}

});

</script>




[/JS]

<div class="map" id="mapPaper">
   <div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>
   <div class="mapArea" data-path="M3,398,153,398,153,332,231,332,231,213,153,213,153,78,3,78z"></div>
   <div class="mapArea" data-path="M263,8,370,8,370,212,154,212,154,48,263,48z"></div>
   <div class="mapArea" data-path="M371,8,480,8,480,48,582,48,582,212,371,212z"></div>
   <div class="mapArea" data-path="M773,80,774,399,670,399,670,460,560,460,559,288,488,288,488,213,582,212,583,79z"></div>
</div>

Вот этот код задает цвет кисточки что будет создавать фигуры

[JS]

var attr = {
stroke: "#74675C",
"stroke-width": 1,
fill: "#FC0",
"fill-opacity": 0.2
},
i = 1,
area = {};

[/JS]

а вот этот код считывает координаты в цикле из html кода вида


[JS]

var oAreas = $(".mapArea");


$.each(oAreas, function(){
area = R.path($(this).attr("data-path")).attr(attr);
i++;
});


[/JS]

<div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>

МНЕ НУЖНО ЗАМЕНИТЬ ВОТ ЭТОТ КОД

[JS]

var attr = {
stroke: "#74675C",
"stroke-width": 1,
fill: "#FC0",
"fill-opacity": 0.2
},
i = 1,
area = {};

[/JS]


на другой, код должен считывать данные аналогично data-path

например назвать его status-path

Пример HTML кода

<div class="mapArea" status-path='stroke: "#74675C", "stroke-width": 1, fill: "#FC0", "fill-opacity": 0.2' data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>


<div class="mapArea" status-path='stroke: "#423234", "stroke-width": 3, fill: "#FFF", "fill-opacity": 0.3' data-path="M435,450,371,256,342,255,3232,322,154,23,154,398,150,399,110,460z"></div>

...............................

и так далее.