테스트 사이트 - 개발 중인 베타 버전입니다

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

· 12년 전 · 8280 · 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>

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

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

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

12년 전
감사합니다. 적용해 볼게요...
감사히 쓰겠습니다^^
10년 전
아이폰에서는 적용이 안됩니다...
아이폰에서는 어떻게 해야죠?

게시글 목록

번호 제목
27182
27176
18634
5442
18632
18629
5435
18627
18626
18623
5409
18621
18617
18615
18614
18608
27162
18607
5405
18606
18605
5401
27152
5397
18603
27144
20667
20666
24485
20651
20632
20620
20607
18602
30749
5396
18601
18599
18596
20590
18589
18587
18586
18585
18584
5387
27106
18583
18580
18579
27120
18574
18570
18566
18562
18558
26490
30733
18554
20572
20541
5377
18553
5373
20534
20531
20527
20525
20519
20513
20507
20503
20496
20490
20483
20471
20464
20447
20419
20405
30729
18549
18544
32084
32083
32082
32081
30728
27097
18537
27092
32080
32079
32078
32077
32076
32075
32074
32073
32072