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

Тема в разделе "JavaScript", создана пользователем ufaclub, 20 сен 2014.

Модераторы: ZiX
  1. ufaclub

    ufaclub

    Регистр.:
    1 май 2007
    Сообщения:
    394
    Симпатии:
    17
    Живой пример:

    http://jsfiddle.net/ufaclub/asje4eu7/




    [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]




    PHP:
    <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]

    PHP:

    <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 кода

    PHP:




    <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>

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

    и так далее.