[jQuery] 이미지맵 사용하기 / 이미지 좌표 구하기 /이미지 반응형 (rwdImageMaps)

html의 map 태그를 이용해서 이미지맵을 만들어 링크를 걸어 보겠습니다.

 

사용방법

좌표 모양 (rect : 사각형, circle : 원형, poly : 다각형)

<img src="이미지경로" border="0" usemap="#map태그 명칭" />
<map name="img태그 명칭" >
	<area shape="좌표 모양" coords="좌표" href="javascript:layer_notice()" />
	<area shape="좌표 모양" coords="좌표" href="javascript:closePop()" />
</map>

 

이미지 좌표 구하기

 

좌표는 그림판에서 쉽게 구하실 수 있습니다.

닫기 버튼의 좌표는 왼쪽 상단의 모서리와 오른쪽 하단의 모서리에 마우스 커서를 올립니다.

왼쪽 상단의 좌표는 23, 273이고 오른쪽 하단의 좌표는 86,300입니다.

닫기 버튼의 좌표는 coords="23,273,86,300" 입니다.

체크박스의 좌표도 동일하게 추출하시면 됩니다.

왼쪽 상단- 이미지 좌표(23, 273)

 

 

 

오른쪽 하단 - 이미지 좌표(86,300)

 

 

아래 소스는 이미지 좌표를 추출 후 클릭 시 alert을 띄우고 있습니다.

간단한 예제이니 응용하셔서 사용하시면 됩니다.

다음 예제는 이미지 팝업의 닫기와 하루 동안 열지 않는 기능을 구현해보겠습니다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script> 

<script language="JavaScript">
	(function($){ 
		$(document).ready(function(e) { 
			$('img[usemap]').rwdImageMaps(); 	
		}); 
	})(jQuery); 
	function closePop() {
		alert("하루 동안 다시 열지 않음 버튼을 클릭하셨습니다.");
	}
	function layer_notice() {
		alert("닫기 버튼을 클릭하셨습니다.");	
	}
</script>
<div id="pop">
	<div>
		<img src="./tt.png" border="0" usemap="#Map9" />
		<map name="Map9">
			<area shape="rect" coords="23,273,86,300" href="javascript:layer_notice()" />
			<area shape="rect" coords="401,279,415,293" href="javascript:closePop()" />
		</map>
	</div>
</div>