에디터로 첨부한 이미지에 반응형 imageMap 태그 링크 영역 유지 - 게시판스킨강좌, 그누보드5강좌

반응형으로 개발된 사이트나 모바일 게시판에서 에디터로 첨부한 이미지에 imageMap 태그를 사용해서 링크를 추가했을 경우 브라우저 사이즈를 늘리거나 줄였을 때 원본 이미지 크기를 벗어나면 링크 포커스가 어긋나게 됩니다.

해결 방법

1. 본문 에디터 이미지에 이미지맵 태그 사용 허용하기

http://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=227

2. Image Map Resize 설치

https://github.com/davidjbradshaw/image-map-resizer

2-1.

imageMapResizer.min.js 파일을 그누보드 /js 폴더에 업로드

/js/imageMapResizer.min.js

2-2.

적용하고 싶은 게시판 스킨 view.skin.php 파일 수정

파일 하단 <script> 바로 위에 추가

<script src="<?php echo G5_JS_URL ?>/imageMapResizer.min.js"></script>
<script type="text/javascript">$('map').imageMapResize();</script>

게시판 뿐만 아니라 일반 페이지에서도 같은 방법으로 적용하면 됩니다.