JSFiddle - React, Tailwind, and code Playground

by Pavel Plehanov

HTML

<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></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>

CSS

#mapPaper {
	width: 780px;
	height: 463px;
	background: url(http://дом-на-баргузинской.рф/test/2-16.png) no-repeat;	
}

JavaScript

jQuery(document).ready(function(){

	var R = Raphael("mapPaper", 780, 463);
	
	var attr = {
		stroke: "#74675C",
		"stroke-width": 1,
		fill: "#FC0",
		"fill-opacity": 0.5
	},
	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);
	}

});