이미지지도 ImageMapster가있는 영역 위로 가져 오기 jQuery가 작동하지 않습니다.

ImageMapster jQuery를 사용하여 다각형 이미지 맵의 호버 영역을 만들려고하지만 영역 위로 마우스를 올리면 작동하지 않습니다. 이미지 맵은 정상적으로 작동하지만 호버링 효과는 작동하지 않습니다. 마우스로 마우스를 움직일 때 각 육각형의 색이 바뀌 길 원합니다.이미지지도 ImageMapster가있는 영역 위로 가져 오기 jQuery가 작동하지 않습니다.

이미지 맵 코드 : ImageMapster jQuery로

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" /> 
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007"> 
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" /> 
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"  /> 
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"  /> 
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"  /> 
</map>

지도 코드는

<script type="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="/scripts/jquery.imagemapster.js"></script> 

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" /> 
<img src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg" style="display:none" /> 
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007"> 
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" /> 
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"  /> 
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"  /> 
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"  /> 
</map> 

<script> 
$(document).ready(function() 
{ 
    $('#sanitisationmap').mapster({ 
    singleSelect : true, 
    clickNavigate : true, 
    fill : true, altImage : 'http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg', 
    fillOpacity : 1, 
}); 
}); 
</script>

확실 해요 그것은 내가 부족 간단하게 뭔가. 여기에 jfiddle이 있습니다.

나는이 문제에 대해 CSS를 사용할 수 있는지 알아 보려고했지만 이미지 맵에서는 CSS가 제대로 작동하지 않는다는 것을 읽었습니다. ImageMapster 페이지와 Beginners 사이트에서 예제를 체크해 봤지만 이상은 작동하지 않습니다.

출처

2014-03-26 Ronan

지도 화 사는 이미지의 이름과 실제 이미지의 이름 사이에 약간의 연결이 끊어지는 것 같습니다. 이 페이지에 단지 하나 개의 이미지를하거나 페이지의 모든 이미지를 실행하는 동일한 스크립트를 원하시면

, 당신은 사용할 수 있습니다

$('img').mapster({ ...

을 그렇지 않으면, 당신은 같은 사용하고 있는지 확인 스크립트의 이미지 이름을 HTML로 사용

jfiddle이가는 한 외부 리소스로 jquery.imagemapster.js를 연결하고 자바 스크립트 패널에 스크립트 블록을 배치하십시오. 필요하지 않으므로 주먹 2 스크립트 줄을 생략 할 수도 있습니다.

나는이를 here으로 갈래서 위의 작업을 수행하여 작동 시켰습니다.

출처

2014-04-21 20:30:02 johncyril

이미지지도 ImageMapster가있는 영역 위로 가져 오기 jQuery가 작동하지 않습니다.

답변

관련 문제