반응형 이미지맵 적용 방법

이미지맵이란?

📌 이미지맵 작업

이미지맵이란 이미지에 원하는 영역을 설정한 후 링크를 걸어주는 작업으로, 따로 이미지맵을 따주는 사이트를 이용하거나 드림위버를 이용하여 간단하게 이미지맵을 생성할 수 있다.

📌 이미지맵 코드

📝 html

<img src="이미지경로" usemap="#이미지맵 사용명칭">
<map name="#이미지맵 사용명칭">
    <area shape="rect" coords="좌표" href="링크주소" target="_blank">
</map>

📝 이미지맵 사용 예시

<img src="../images/main/test.png" usemap="#imagemap">
<map name="imagemap">
    <area shape="rect" coords="0,100,100,100" href="http://naver.com" target="_blank">
    <area shape="rect" coords="100,200,200,200" href="http://daum.net" target="_blank">
</map>

📌 Issues

위와 같이 이미지맵을 사용하면 이미지 크기에 따른 이미지맵이 적용되지 않고 틀어져버린다. 이는 스크립트로 간단하게 해결할 수 있다.

반응형 이미지맵

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

👉 첫번째 , 스크립트 파일 추가

https://github.com/stowball/jQuery-rwdImageMaps
여기가 반응형 이미지맵의 데모 사이트이다. 여기서 js 파일을 다운로드하면 된다. 그러나 js 내용이 길지 않기 때문에 복사해서 넣어도 상관없을 것이다.

👉 두번째, 스크립트 코드 추가

script 안에 다음과 같은 코드를 추가해주면 된다. 이렇게 추가해주면 이미지 크기가 변함에 따라 맵도 이미지 크기에 따라 적용되는 것을 볼 수 있다.

$(function(){
	$('img[usemap]').rwdImageMaps();
	$("#img").width("100%");
});