2012-07-28 4 views
4

동적으로 크기가 조정 된 이미지를 내가 만드는 이미지 맵에 맞출 수있는 방법을 찾고 있습니다.동적 크기 이미지가있는 ImageMap 좌표 조정

$(window).bind("load resize", function(){ 

     $(".post img").height($(window).height()-110); 
     $(".post img").width(($(".post img").newHeight()/$(".post img").oldHeight()) * $(".post img").oldWidth()); 

}); 

을하지만, 이미지 맵 나는 원래 크기에 충실합니다 나는 창 크기로 이미지를 확장 할 jQuery를 사용하고 있습니다. 나는 ImageMapster를보고 있지만, 자동으로 모든 이미지 맵 스케일을 만드는 방법을 알지 못한다. . 사용 http://www.dersuawesome.com/home/

답변

3

imagemapster 에서 :

는 것이의 페이지입니다 $ ('IMG') mapster ('크기 조정', 폭, 높이, 기간); 원래의 문서에서 imagemapster

인용 :

$ ("IMG") mapster ('크기 조정', 폭, 높이, 길이). --- 이미지 : 이미지의 새로운 너비 또는 높이 : 이미지의 새 높이 기간 : (선택 사항) 0 | 밀리 초 (크기 변경을 애니메이션화) 이미지 크기를 지정한 크기로 조정합니다. 너비 또는 높이 중 하나를 전달해야하며 다른 하나는 원본 이미지와 동일한 종횡비로 계산 된 입니다. 을 모두 전달하면 새 크기를 계산할 때 너비 만 사용됩니다. 비율은 원본 이미지와 동일하게 유지되어야합니다.

인용 끝. 예. 이미지가 900 픽셀 폭이되어야 할 때 사용합니다 여기

$('img').mapster('resize',900,null,2000); 

내가 부드러운 효과를 얻기 위해이 resizeing 2000 밀리 초를 사용하는 imagemapster 말했다. 코드의 onconfigured 섹션에이 퍼팅 나를 위해 잘 작동합니다 :

onConfigured: function(){ 
     $('img').mapster('resize',900,null,2000); 
     } , 
+0

부록을 : imagemapster의 저자는 여기에 완전한 크기 조정 - 예를 들어 있습니다 http://www.outsharked.com/imagemapster/default. aspx? demos.html # resize – Kurt

+0

addendum2 : imagemapster의 저자가 작성한 또 다른 예는 다음과 같습니다. http://jsfiddle.net/jamietre/jQG48/ – Kurt

+0

크기가 미리 지정된 크기로 조정되지는 않습니다. 자동으로 이미지 크기에 맞게 이미지 맵이 필요합니다. –