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

본문 바로가기
전체검색

게시판스킨강좌

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

에디터로 첨부한 이미지에 반응형 imageMap 태그 링크 영역 유지

관리자 19-09-03 01:41

반응형으로 개발된 사이트나 모바일 게시판에서 에디터로 첨부한 이미지에 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>



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

댓글목록 +1

댓글목록

profile_image

테크니션님의 댓글

테크니션 작성일

감사합니다.

자세하게 쉽게 설명해 주셔서

한방에 깔끔하게 성공............

감사합니다.

로그인 후 댓글 작성 가능합니다.

로그인

로그인 후 글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright gnustudy.com All rights reserved.