모바일웹 이미지맵 사용 소스
<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개
아이폰에서는 어떻게 해야죠?
게시글 목록
| 번호 | 제목 |
|---|---|
| 12438 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 12437 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 12436 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 12435 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 12434 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 12433 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 12432 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 12431 |
MySQL
대소문자 데이터 조회하기
|
| 12430 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 12429 | |
| 12428 |
PHP
신문 기사를 긁어오기 입니다.
|
| 12427 |
JavaScript
시도, 구군, 동 주소 select
|
| 12426 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 12425 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 12424 |
PHP
rss 읽어오기 입니다.
|
| 12423 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
| 12422 | |
| 12421 |
JavaScript
키보드,마우스 등 불펌방지 입니다.
|
| 12420 |
JavaScript
해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
|
| 12419 |
JavaScript
특정페이지에서 자동으로 새로고침 하기 입니다.
|
| 12418 |
JavaScript
마우스 오버시 이미지 안쪽에 테두리주기
|
| 12417 |
node.js
git 사용메뉴얼 보면 깝깝 하네요
|
| 12416 | |
| 12415 | |
| 12414 |
JavaScript
간결한 레이어 메뉴 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기