imagemapster imagemapster 다른 색으로 다른 영역

Question

imagemapster에서 다음과 같은 작업이 가능한지 궁금합니다. 영역 1과 영역 2가 필요합니다. 둘 중 하나를 가리키면 강조 표시해야하지만 다른 색으로 강조 표시해야합니다 (예 : 영역 1은 파란색 임). 녹색 중 하나를 가리키면 녹색이되고 영역 2는 마우스를 올리면 노란색과 빨간색이됩니다.

이 내가 지금까지 뭘하려 :

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $('#Landkarte').mapster({ 
    fillOpacity:0.5, 
    mapKey: 'data-group', 
    areas : [ 
    {key : 'keyone',fillColor: 'FF0000',fillOpacity : 0.5}, 
    {key : 'keytwo',fillColor: 'FFFF00',fillOpacity : 0.5}, 
    }); 
    }); 
</script> 

그리고 내 HTML

<area data-group="keyone,keytwo" href="#" coords="117,65,370,89" shape="rect"></area> 
    <area data-group="keyone" href="#" coords="117,65,370,89" shape="rect"></area> 

이 분명히 정말 내가 원하는 방식으로 작동하지 않습니다. 누군가 나를 도울 수 있다면 나는 아주 대단 할 것이다!

안부,

라프

Answer 1

다른 색은 아무 문제가 없어야합니다. "imagemapster"를 사용하면 "data-maphilight"속성을 추가하기 만하면됩니다.

데이터 maphilight = '{"은, strokeColor": "FF0000" "strokeWidth를"5 "로하고 fillColor": "FFFFFF", "fillOpacity"0.5}

<map name="map_dummy" id="map_dummy"> 
    <area shape="poly" coords="226,245,334,335,434,345,454,317,308,194" href="http://www.google.de" alt="Object" data-maphilight='{"strokeColor":"FF0000","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'> 
    <area shape="poly" coords="9,566,51,509,171,584,306,582,406,670,386,687,174,689" href="#" alt="Subject" data-maphilight='{"strokeColor":"FFFF00","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'> 
</map> 

을

바이올린 : http://jsfiddle.net/Fiddel/gX3tH/