Показать сообщение отдельно
  #1 (permalink)  
Старый 20.09.2014, 02:57
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

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

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




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





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



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

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


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


var oAreas = $(".mapArea");

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


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



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

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



на другой, код должен считывать данные аналогично 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>

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

и так далее.
Ответить с цитированием