jQuery|JAVASCRIPT|HTML5 모바일 웹페이지에서 USEMAP 좌표 오류 해결하기 (rwdImageMaps)
페이지 정보
조회 176회
작성일 20-04-28 16:16
모바일 웹에서 이미지가 퍼센트로 크기가 변하면서 USEMAP 좌표가 어긋나는 문제를 jQuery 플러그인 rwdImageMaps로 해결하는 방법을 소개한다. jquery와 rwdImageMaps 스크립트를 로드한 뒤 img[usemap] 요소에 rwdImageMaps()를 적용하면 화면 크기가 바뀌어도 클릭 영역이 이미지와 정확히 일치하도록 자동으로 좌표가 보정된다.
因为手机网页中图片大多数使用百分比显示
所以USEMAP的坐标错位
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
(function($){
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
})(jQuery);
</script>첨부파일
-
jquery.rwdImageMaps.min.js (1.1K)
24회 다운로드 | DATE : 2020-04-28 16:18:59
- 이전글jQuery 이미지 확대 플러그인 ckshow_Img 1.6 사용법 20.04.28
- 다음글Javascript·PHP에서 자주 쓰이는 정규표현식 모음 20.04.28