반응형 이미지맵 (jQuery RWD Image Maps) + 이미지맵 사이트

 

 

1. 이미지 태그 사용 - 속성 usemap 추가

<img src="이미지 주소" alt="이미지 설명" usemap="#link_01">

 

 

2. map 태그 추가

<img src="이미지 주소" alt="이미지 설명" usemap="#link_01">
<map name="link_01">
	<area shape="영역 모양" coords="좌표값" href="클릭 시 경로" alt="이미지 설명" />
</map>

 

 

3. rwdimagemap 플러그인 사용

반응형 홈페이지를 제작할 때 사용할 수 있는 플러그인

 

▶ rwdimagemap 다운로드 (클릭하면 바로 다운로드가 진행됩니다.)

https://github.com/stowball/jQuery-rwdImageMaps/archive/master.zip

 

 

4. script 작성

<script src="../js/jquery.rwdImageMaps.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('img[usemap]').rwdImageMaps();
});
</script>​

 

 

 

[참고! 이미지맵 좌표값 구하기 편한 사이트]

https://www.image-map.net/

Free Online Image Map Generator

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor