[Jquery/Javascript]이미지맵을 이용해서 특정위치로 스크롤 이동하기

[Jquery/Javascript]이미지맵을 이용해서 특정위치로 스크롤 이동하기

 

[Jquery/Javascript]이미지맵을 이용해서 특정위치로 스크롤 이동하기

 

모바일 혹은 PC환경에서 이미지맵을 이용해서 현재 페이지 내의 특정 위치로 이동하는 스크립트를 만들었다. 

 

PC환경에서의 이미지맵은 작성법이 변경될 일이 없지만 모바일환경에서는 디바이스별로 이미지값이 달라지기 때문에

 

jquery 등을 이용해서 좌표값을 다시 설정해줘야 한다. 

 

하지만 아래 코드는 jquery 소스 추가 없이 javascript 만으로 구현을 해서 적용했다. 

 

그리고 해당 좌표값 클릭시 원하는 위치로 스크롤 할 수 있도록 구현했다. 

 

<div class="imgbox"><img src="/upload/banner/banner.jpg" id="imgmap1" usemap="#imgmap10" /></div>
<map id="imgmap10" name="imgmap10">
	<area id="img_btn1" shape="rect">
	<area id="img_btn2" shape="rect">
	<area id="img_btn3" shape="rect">
</map>

먼저 기본 이미지맵 소스이다. 일반적인 이미지맵과 다른점이 있다면 area 영역에 id값을 할당해 주었다. 

 

id 값을 할당함으로써 jquery 연동이 좀더 수월해진다. 

 

페이지 이동등을 위해서는 보통 href 링크를 이용하는데 여기서는 다른 페이지로 이동하지 않고 

 

스크롤 위치만 이동할거라 생략했다. 

 

 

<div class="imgbox" id="imgbox_01"><img src="/upload/banner/title-01.jpg"></div>
<div class="img-body">
내용 1
</div>
<div class="imgbox" id="imgbox_02"><img src="/upload/banner/title-02.jpg"></div>
<div class="img-body">
내용 2
</div>
<div class="imgbox" id="imgbox_03"><img src="/upload/banner/title-03.jpg"></div>
<div class="img-body">
내용 3
</div>

위 내용은 페이지 내의 영역별 id 할당 내용이다. 

 

 

function imageMap(org_img,org_width,x1,y1,x2,y2,mapid){
 var rxsize = document.getElementById(org_img).width; // 현재 적용된 이미지 가로값 가져오기
 var xp1 = rxsize / org_width * x1; //이미지맵의 시작점 x좌표 구하기
 var yp1 = rxsize / org_width * y1; //이미지맵의 시작점 y좌표 구하기
 var xp2 = rxsize / org_width * x2; //이미지맵의 도착점 x좌표 구하기
 var yp2 = rxsize / org_width * y2; //이미지맵의 도착점 y좌표 구하기
 document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;
}

//원래 좌표위치
imageMap('imgmap1',1140,228,521,957,618,'img_btn1'); //원본 이미지의 이미지맵 좌표값, id값과 매치
imageMap('imgmap1',1140,228,648,957,753,'img_btn2'); //원본 이미지의 이미지맵 좌표값, id값과 매치
imageMap('imgmap1',1140,228,786,957,878,'img_btn3'); //원본 이미지의 이미지맵 좌표값, id값과 매치

javascript를 이용해서 새로운 좌표값을 가져오는 스크립트.

 

이미지맵의 좌표값과 해당영역의 id값을 가지고 javascript 함수를 호출해준다. 

 

연결한 링크가 3개라 3번 불러주었으며 링크개수에 따라 추가 혹은 삭제하면 된다. 

 

 

 

$(document).ready(function(){
	$('#img_btn1').click(function(){
		var offset = $('#imgbox_01').offset(); //선택한 태그의 위치를 반환
		$('html').animate({scrollTop : offset.top}, 400);
	});
	$('#img_btn2').click(function(){
		var offset = $('#imgbox_02').offset(); //선택한 태그의 위치를 반환
		$('html').animate({scrollTop : offset.top}, 400);
	});
	$('#img_btn3').click(function(){
		var offset = $('#imgbox_03').offset(); //선택한 태그의 위치를 반환
		$('html').animate({scrollTop : offset.top}, 400);
	});
});

 

이미지맵 코드의 id 를 클릭하면 해당위치로 스크롤을 이동하는 jquery 코드.

 

$('html').animate({scrollTop : offset.top}, 400);

 

여기 코드에서 이동할 위치와 이동시간을 지정해 주었다.