[tsigel]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div style='background: url("http://tsigel.1gb.ru/my_projects/map/images/rf-map-b.png") no-repeat; width: 830px; height: 560px'>
 <canvas id="map" width='830' height='560'  style="position: absolute; left: 0; top: 0"></canvas>
 <canvas id="map_line" width='830' height='560' style="position: absolute; left: 0; top: 0"></canvas>
<img src="http://tsigel.1gb.ru/my_projects/map/images/rf-map-b.png" width="830" height="560" border="0" alt="" usemap="#rf-map"
         class="HoverImg map maphilighted"
         style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 0">
<map name="rf-map" style="width: 350px; height: 350px">
<area shape="poly" alt=""      coords="120,259,120,263,121,268,126,281,129,283,131,286,132,291,135,290,137,287,138,288,141,287,143,286,145,286,146,287,149,287,150,288,150,289,152,291,153,290,154,289,156,287,157,285,157,283,159,283,160,280,157,278,157,275,158,273,160,272,160,271,160,269,161,268,162,269,163,269,164,269,165,267,167,264,165,258,168,256,169,251,171,249,174,248,176,244,176,241,175,240,176,238,176,235,174,235,173,234,171,235,170,233,170,232,171,229,165,224,160,233,158,232,153,235,151,235,151,239,149,240,149,244,146,246,143,246,142,254,142,257,137,259,120,259"
 href="#" class="region RU-KR">
</map>
</div>
<script>
$('.region').hover(function() {
  showBorder($(this).attr('coords').split(','));
}, function() {
  clear(document.getElementById("map_line"));
  clear(document.getElementById("map"));    
});

function showBorder(coords) {
        var canvas, ctx; 

        function draw(canvas, coords, lineColor, fullColor) {
            ctx = canvas.getContext("2d");
            ctx.strokeStyle = lineColor;
            ctx.fillStyle = fullColor;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(coords[0], coords[1]);
            for (var i = 2; i < coords.length; i = i + 2) {
                ctx.lineTo(coords[i], coords[i + 1]);
            }
            ctx.stroke();
            if (fullColor != null) {
                ctx.fill();
            }
            ctx.closePath();
        }       
        draw(document.getElementById("map_line"), coords, "#990066", null);
        draw(document.getElementById("map"), coords, "#990066", 'rgba(135, 206, 235, 0.9)');
    }

function clear(canvas) {
        var ctx = canvas.getContext("2d");
        canvas.width = canvas.width;
};
</script>