чтобы не дублировать area, их можно скопировать с помощью javascript
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery.metadata.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function(){
$('.map').map( imgToMap ).find('area')
.each( duplicateArea )
$('.map').maphilight();
});
function duplicateArea(){
var alwaysOnArea = $(this).clone();
alwaysOnArea.metadata().fillOpacity -= 0.1;
alwaysOnArea.metadata().alwaysOn = true;
alwaysOnArea.get(0).id = null;
alwaysOnArea.insertAfter(this);
}
function imgToMap(){
var mapName = this.getAttribute('usemap').substr(1);
return $('map[name='+mapName+']').get(0);
}
</script>
</head>
<body>
<img src="http://davidlynch.org/js/maphilight/docs/demo_simple.png" width="420" height="300" class="map" usemap="#features">
<map name="features">
<area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#">
<area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="1,1,44,44,55,55,66,66,11,0" href="#">
</map>
</body>
</html>
твой последний вариант - совсем не тру
если расскажешь подробнее, что это за изображение, и что там за области, и как оно работает - помогу с дублированием областей
p.s. было бы намного проще, если бы твой код можно было запустить прямо на сайте. Как видишь, для этого есть
все возможности. Получил бы быстрее ответ или просто больше людей участвовало бы в обсуждении