k

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

· 2012-12-20 (목) 16:22:38 · 17148 · 4

<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개

2013-04-23 (화) 11:24:39
감사합니다. 적용해 볼게요...
감사히 쓰겠습니다^^
2015-03-13 (금) 21:22:01
아이폰에서는 적용이 안됩니다...
아이폰에서는 어떻게 해야죠?
ㅠㅠㅠㅠㅠㅠ이거때문에 고생하고있었는데 한번에 성공했어요 너무 감사합니다!!!
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

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

+
분류 제목 글쓴이 날짜 조회
MySQL 12-12-30 조회 6,842
웹서버 12-12-30 조회 1.9만
Mobile 12-12-29 조회 4,784
PHP 12-12-28 조회 6,013
PHP 12-12-28 조회 5,408
PHP 12-12-28 조회 2,734
jQuery 12-12-27 조회 3,919
jQuery 12-12-27 조회 3,179
JavaScript 12-12-27 조회 3,669
PHP 12-12-27 조회 2,683
PHP 12-12-27 조회 4,092
jQuery 12-12-27 조회 1만
웹서버 12-12-26 조회 5,252
PHP 12-12-20 조회 5,343
JavaScript 12-12-20 조회 1.7만
JavaScript 12-12-20 조회 2,706
PHP 12-12-18 조회 9,272
jQuery 12-12-18 조회 2,849
OS 12-12-15 조회 6,035
OS 12-12-15 조회 7,354
웹서버 12-12-15 조회 7,973
PHP 12-12-14 조회 4,764
OS 12-12-12 조회 4,604
OS 12-12-12 조회 8,548
jQuery 12-12-12 조회 3,619
jQuery 12-12-12 조회 7,619
jQuery 12-12-12 조회 9,478
PHP 12-12-10 조회 2,420
PHP 12-12-10 조회 2,486
OS 12-12-10 조회 6,122