Всем привет, есть картинка разбитая на области и использую maphilight
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
</head>
<body>
<img id="Image-Maps-Com-image-maps-2014-03-31-160814" src="http://www.vd-vd.ru/sites/default/files/storage/teaser/30a5bccec606cd58f9ac6060e71fd770.jpg" border="0" width="435" height="300" orgWidth="435" orgHeight="300" usemap="#image-maps-2014-03-31-160814" alt="" />
<map name="image-maps-2014-03-31-160814" id="ImageMapsCom-image-maps-2014-03-31-160814">
<area shape="rect" coords="433,298,435,300" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="neck" alt="neck" title="neck" href="http://www.image-maps.com/" shape="poly" coords="80,84,100,67,97,105,120,153,142,188,149,204,131,197,118,192,107,178,97,169,81,125,83,108" style="outline:none;" target="_self" />
<area id="l" alt="l" title="l" href="http://www.image-maps.com/" shape="poly" coords="106,62,104,102,120,138,156,139,184,129,191,101,184,61,145,55" style="outline:none;" target="_self" />
<area id="sp" alt="sp" title="sp" href="http://www.image-maps.com/" shape="poly" coords="189,62,196,94,189,127,238,127,232,99,234,61" style="outline:none;" target="_self" />
<area id="f" alt="f" title="f" href="http://www.image-maps.com/" shape="poly" coords="238,60,238,107,244,124,260,123,277,123,285,59" style="outline:none;" target="_self" />
<area id="hh" alt="hh" title="hh" href="http://www.image-maps.com/" shape="poly" coords="122,142,153,145,183,135,173,186,158,192,148,190,140,166" style="outline:none;" target="_self" />
<area id="cc" alt="cc" title="cc" href="http://www.image-maps.com/" shape="poly" coords="189,133,178,181,206,174,237,173,243,153,240,132" style="outline:none;" target="_self" />
<area id="nn" alt="nn" title="nn" href="http://www.image-maps.com/" shape="poly" coords="245,131,249,149,243,173,265,183,329,158,310,140,283,129" style="outline:none;" target="_self" />
<area id="kk" alt="kk" title="kk" href="http://www.image-maps.com/" shape="poly" coords="290,56,285,116,282,124,310,132,321,113,325,98,325,85,334,57" style="outline:none;" target="_self" />
<area id="jk" alt="jk" title="jk" href="http://www.image-maps.com/" shape="poly" coords="330,93,324,116,314,136,335,161,342,177,353,179,366,170,369,158,380,133,380,93" style="outline:none;" target="_self" />
<area id="ssd" alt="ssd" title="ssd" href="http://www.image-maps.com/" shape="poly" coords="339,57,330,88,357,86,381,87,386,82,382,72,371,61" style="outline:none;" target="_self" />
<area id="ffg" alt="ffg" title="ffg" href="http://www.image-maps.com/" shape="poly" coords="383,92,387,87,389,141,392,158,392,167,397,177,397,204,394,206,392,202,388,204,388,193,385,187,387,179,386,174,386,166,388,163,386,162,386,152,386,139" style="outline:none;" target="_self" />
<area id="er" alt="er" title="er" href="http://www.image-maps.com/" shape="poly" coords="52,44,60,59,57,79,51,80,42,51,40,52,39,76,35,86,32,93,22,106,12,118,2,132,2,141,3,146,9,150,17,156,30,155,49,162,57,162,65,165,79,128,77,84,70,82,72,70,71,62,64,52" style="outline:none;" target="_self" />
<area id="ed" alt="ed" title="ed" href="http://www.image-maps.com/" shape="poly" coords="151,196,156,216,167,214,172,191,161,196" style="outline:none;" target="_self" />
<area id="dfg" alt="dfg" title="dfg" href="http://www.image-maps.com/" shape="poly" coords="345,183,357,182,368,174,375,190,373,202,357,205,354,197" style="outline:none;" target="_self" />
<area id="hn" alt="hn" title="hn" href="http://www.image-maps.com/" shape="poly" coords="314,169,319,198,317,220,306,238,298,247,297,252,310,253,321,235,332,213,340,200,340,193,340,182,336,176,332,164" style="outline:none;" target="_self" />
<area id="ws" alt="ws" title="ws" href="http://www.image-maps.com/" shape="poly" coords="356,210,365,211,372,208,369,253,361,255,355,252,358,239,358,228,359,221" style="outline:none;" target="_self" />
<area id="vb" alt="vb" title="vb" href="http://www.image-maps.com/" shape="poly" coords="177,190,196,182,195,195,197,211,204,237,204,249,188,250,191,241,189,221,181,210" style="outline:none;" target="_self" />
<area id="as" alt="as" title="as" href="http://www.image-maps.com/" shape="poly" coords="150,251,166,254,170,249,168,235,168,219,155,220,155,231,154,239,154,246" style="outline:none;" target="_self" />
<area id="aa" alt="aa" title="aa" href="http://www.image-maps.com/" shape="poly" coords="72,164,81,163,91,166,81,137" style="outline:none;" target="_self" />
</map>
<script>
$('#Image-Maps-Com-image-maps-2014-03-31-160814').maphilight({strokeColor: 'ffFF00', shadow: true, shadowX: 7,
shadowY: 7, fill: true,
fillColor: 'FFFFFF'});
</script>
</body>
</html>
Как сделать подсветку каждого элемента отдельным цветом и не про наведении, а просто так.
Простой
