jQuery 플러그인 imagemapster가 아무 것도하지 않습니다.

Question

저는 아직 자바 스크립트와 jQuery에 익숙하지 않으므로 내가 볼 수없는 명백한 해결책 일 수 있습니다.

나는 jQuery를 참조했으며 다른 것들에는 잘 작동한다. imagemapster reference에 문제가있을 수 있습니까? 나는 그것을 here에 다운로드했고 나는 이것을 이렇게 참조했다. 나는 "imagemapster.min.js"도 넣었지만,이 둘 중 하나가 사용될 때 둘 다 작동하지 않을 때 작동하지 않습니다.

<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"></script> 
<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"></script> 

필자는 설명서를 읽고 거의 정확하게 (아래 참조) 따라 갔지만 실제로는 아무 것도 강조 표시하지 않았습니다. 대신, 그것은 페이지 맵을 파멸시키는 약간의 포지셔닝을 엉망으로 만듭니다. 맵스터는 위치 지정과 관련이 없어야하기 때문에 말이되지 않습니다. 클릭 할 수있는 영역도 위로 이동하고 위치를 벗어났습니다. 어떤 오류도주지 않습니다. 코드는 그냥 통과하고 내가 말한 것을 제외하고는 아무 일도 일어나지 않습니다. 그리고 예, 강조하려고하는 이미지 맵은 완전히 기능적이며 #downstairs, #upstairs 및 #offices는 이미지 태그의 ID입니다.

$(document).ready(function() 
{ 
    $('#downstairs').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
      fillColor: '2aff00' 
     } 
    }); 

    $('#upstairs').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
      fillColor: '2aff00' 
     } 
    }); 

    $('#offices').mapster({ 
     fillOpacity: 0.5, 
     mapKey: 'alt', 
     isSelectable: false, 
     render_highlight: 
     { 
     fillColor: '2aff00' 
     } 
    }); 
}); 

이미지 및지도의 html입니다. 세 사람 모두이 형식을 사용합니다.

<div style="position:static;left:0px;top:0px"> 
<img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;" 
    src="sourceHere" width="1000" /> 
<map name="downmap" id="downmap"> 
    <!-- There is a large list of areas here that follow this format--> 
    <area title="Portable 1" onclick="somefunction" coords="198,81,223,117" /> 
</map> 
</div> 

Answer 1

ImageMapster를 처음 시도했을 때 올바르게 경로를 설정하지 않았습니다. 영역 경로는 처음부터 다시 만날 때까지 위에서 아래로, 그 다음 왼쪽에서 오른쪽으로, 그리고 아래에서 위로 오브젝트를 둘러 싸야합니다. 일단 내가 그렇게하면, ImageMapster는 "뭔가를했습니다". 내가 올바른 길을 가기 전에, 아무 일도 일어나지 않았던 것처럼 보였다.

또한 image에 map을 사용해야한다고 말합니다.

<div id="mapblock"> 
    <img id="map_image" src="/images/map.png" usemap="#map_map"/> 
    <map name="map_map"> 
     <area data-key="AZ" full="item" href="#" coords="... " shape="poly" /> 
    </map> 
</div> 

또한, 당신은 코드에서 사용하는 ID 번호는 image의 ID가 아닌 맵의 ID되어야한다.

또한 맵 영역이 이미지 내에 있는지 확인하십시오. 이미지의 width을 설정해야 할 수도 있습니다. 그렇지 않으면 호버 효과가 표시되지 않습니다. 내가 처음 시도했을 때, 내 영역이 올바른 위치에 있다는 것을 확신 할 때까지 아무 것도 보지 못했습니다.

나는 포토샵과 일러스트 레이터로 image-map을 생성하기 위해 mini-tutorial here이라고 썼다. 이것은 나를 위해 아주 잘 작동했고, image-map은 정확히 완벽한 장소에있었습니다. 많은 경기

<area title="Portable 1" onclick="somefunction" coords="198,81,223,117" />

아, 당신의 좌표 [OP는 이미지 맵 HTML을 게시 한 후]

, 나는 생각한다. coords를 줄로 생각하십시오. 당신은 라인의 시작과 다른 하나의 포인트를 기술했다 - 당신은 완전한 루프를 만들기 위해 그것을 말해야한다. 대신이 시도하고 어떻게되는지 :

'좌표 = "198,81, 223117, 198,81"지도 영역은 HREF가 정의되어

Answer 2

확인합니다. Ex : href = "#"

Answer 3

지도 아래로 스크립트를 옮기기 전까지 비슷한 문제가있었습니다.문서에서 찾을 수는 없지만 플러그인이 작동하려면 이미지를 먼저로드해야한다는 것을 기억합니다. 머리 속에있는 플러그인을 계속 호출하고 싶지만 이미지 맵 다음에 자바 스크립트를 넣고 싶을 것입니다.