이전
목록
다음
k

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

kiplayer
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-12-20 (목) 16:22:38 · 11194 · 3

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

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

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

#개발자팁 #개발자 #팁자료실 #javascript
|

댓글 3개

아이다운
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-04-23 (화) 11:24:39
감사합니다. 적용해 볼게요...
아이케
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-08-16 (금) 15:40:36
감사히 쓰겠습니다^^
그냥그렇게
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-03-13 (금) 21:22:01
아이폰에서는 적용이 안됩니다...
아이폰에서는 어떻게 해야죠?
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,531
15-12-13 조회 2,946
15-12-11 조회 2,607
15-12-11 조회 2,568
15-12-11 조회 2,571
15-12-10 조회 2,529
15-12-10 조회 2,588
15-12-10 조회 2,562
15-12-03 조회 3,205
15-12-03 조회 2,719
15-11-25 조회 2,801
15-11-09 조회 3,238
15-11-04 조회 2,971
15-06-09 조회 4,097
15-05-06 조회 5,094
15-03-28 조회 4,618
14-12-05 조회 5,005
14-10-25 조회 5,100
14-10-13 조회 4,275
14-10-03 조회 6,288
14-09-19 조회 4,969
14-09-18 조회 4,054
14-09-13 조회 4,616
14-09-03 조회 5,606
14-08-26 조회 4,213
14-08-26 조회 4,018
14-08-26 조회 3,981
14-08-11 조회 6,531
14-08-06 조회 4,127
14-08-06 조회 3,726
14-08-06 조회 3,943
14-08-01 조회 6,343
14-08-01 조회 3,848
14-07-30 조회 4,448
14-06-28 조회 5,167
14-06-28 조회 4,440
14-05-11 조회 4,592
14-05-09 조회 4,951
14-05-09 조회 7,713
14-04-30 조회 4,341
14-04-27 조회 4,198
14-04-25 조회 4,900
14-04-21 조회 3,878
14-04-21 조회 5,006
14-04-10 조회 4,608
14-04-01 조회 6,161
14-03-03 조회 3,535
14-02-25 조회 5,924
14-02-14 조회 5,196
14-02-13 조회 4,955
14-01-03 조회 4,450
13-12-06 조회 3,770
13-11-22 조회 5,523
13-11-18 조회 4,031
13-10-02 조회 4,448
13-10-02 조회 3,699
13-10-02 조회 3,962
13-10-02 조회 3,818
13-10-02 조회 4,185
13-09-16 조회 8,034
13-09-16 조회 5,399
13-08-18 조회 5,434
13-07-11 조회 4,113
13-07-10 조회 4,697
13-07-09 조회 4,734
13-07-09 조회 4,988
13-07-04 조회 4,489
13-07-04 조회 4,128
13-07-04 조회 4,240
13-07-01 조회 4,728
13-07-01 조회 4,560
13-07-01 조회 6,837
13-06-23 조회 4,388
13-06-05 조회 3,636
13-05-29 조회 4,876
13-05-10 조회 4,282
13-04-05 조회 4,900
13-04-05 조회 6,588
13-04-05 조회 1.1만
13-04-05 조회 7,183
13-04-05 조회 6,570
13-03-31 조회 5,848
13-03-31 조회 4,172
13-03-28 조회 4,532
13-03-28 조회 6,728
13-03-28 조회 9,212
13-03-28 조회 4,344
13-03-24 조회 3,959
13-03-21 조회 4,638
13-03-21 조회 1.8만
13-03-14 조회 3,946
13-03-10 조회 4,753
13-03-10 조회 4,514
13-03-10 조회 4,214
13-03-08 조회 5,270
13-03-08 조회 4,375
13-03-03 조회 5,030
13-03-03 조회 7,487
13-03-03 조회 4,230
13-03-03 조회 1.1만
글쓰기