HTML 이미지맵 반응형 적용 방법

이미지의 영역별로 링크를 넣을 땐 이미지맵(image map) 을 사용하게 되는데, 이 이미지 맵을 일반적인 소스로 작성시 모바일같이 화면의 영역에 맞춰 사이즈가 조정되는 반응형에는 정상적으로 링크가 적용되지 않을 때 처리하는 방법에 대해 알아보도록 하겠다.

 

자바스크립트 삽입

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
 <script>
$(function(){
	$('img[usemap]').rwdImageMaps();
	$("#img").width("100%");
});
</script>

 

위의 자바스크립트를 삽입하게 되면 이미지의 사이즈가 100%로 기준점이 정상적으로 잡히게 된다.

 

이미지맵(좌표링크) 사용방법

crone.tistory.com/309

HTML 이미지맵 (image map) 좌표 링크 설정 방법