k

모바일웹 이미지맵 사용 소스

<img id="event_img" src="이미지" usemap="#mmap" style="width:100%;">
<map name="mmap">
<area id="ar1" shape="rect" href="링크1" target="_blank">
<area id="ar2" shape="rect" href="링크2" target="_blank">
<area id="ar3" shape="rect" href="링크3" target="_blank">
<area id="ar4" shape="rect" href="링크4" target="_blank">
</map>

<script language="Javascript">
<!--
function imageMap(rimg,rwidth,x1,y1,x2,y2,mapid){
 var rxsize = document.getElementById(rimg).width;
 var xp1 = rxsize / rwidth * x1;
 var yp1 = rxsize / rwidth * y1;
 var xp2 = rxsize / rwidth * x2;
 var yp2 = rxsize / rwidth * y2;
 document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;
}

//원래 좌표위치
imageMap('event_img',실제 이미지 너비,747,1450,983,1700,'ar1');
imageMap('event_img',실제 이미지 너비,509,1450,745,1700,'ar2');
imageMap('event_img',실제 이미지 너비,28,1450,267,1700,'ar3');
imageMap('event_img',실제 이미지 너비,270,1450,506,1700,'ar4');
-->
</script>

원래 좌표 위치에서 이미지의 너비의 축소 정도를 파악해서
좌표를 변경해주는 스크립트입니다.

몇군제 찾아봐서 제 입맛에 맞게 띨거 다 띠고 포인트만 남긴겁니다.^^

|

댓글 4개

감사합니다. 적용해 볼게요...
감사히 쓰겠습니다^^
아이폰에서는 적용이 안됩니다...
아이폰에서는 어떻게 해야죠?
ㅠㅠㅠㅠㅠㅠ이거때문에 고생하고있었는데 한번에 성공했어요 너무 감사합니다!!!
댓글을 작성하시려면 로그인이 필요합니다. 로그인

개발자팁

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
MySQL 13년 전 조회 6,404
웹서버 13년 전 조회 1.9만
Mobile 13년 전 조회 4,386
PHP 13년 전 조회 5,622
PHP 13년 전 조회 5,032
PHP 13년 전 조회 2,369
jQuery 13년 전 조회 3,522
jQuery 13년 전 조회 2,822
JavaScript 13년 전 조회 3,290
PHP 13년 전 조회 2,306
PHP 13년 전 조회 3,675
jQuery 13년 전 조회 9,973
웹서버 13년 전 조회 4,869
PHP 13년 전 조회 4,894
JavaScript 13년 전 조회 1.7만
JavaScript 13년 전 조회 2,358
PHP 13년 전 조회 8,903
jQuery 13년 전 조회 2,462
OS 13년 전 조회 5,640
OS 13년 전 조회 6,890
웹서버 13년 전 조회 7,534
PHP 13년 전 조회 4,350
OS 13년 전 조회 4,195
OS 13년 전 조회 8,132
jQuery 13년 전 조회 3,294
jQuery 13년 전 조회 7,194
jQuery 13년 전 조회 9,089
PHP 13년 전 조회 2,024
PHP 13년 전 조회 2,113
OS 13년 전 조회 5,748
🐛 버그신고