이미지맵 imageMap 반응형 제이쿼리, 이미지 사이즈가 변해도 링크 영역 유지 - 웹개발정보

본문 바로가기
전체검색

웹개발정보

무료 사진, 폰트, 아이콘, 이미지, jQuery 소스 정보 등을 공유합니다.

이미지맵 imageMap 반응형 제이쿼리, 이미지 사이즈가 변해도 링크 영역 유지

관리자 18-08-13 02:43

반응형으로 제작된 곳에서 이미지맵을 사용할 때
이미지 사이즈가 가변적으로 변해도 이미지맵 링크 영역을 그대로 유지시켜줍니다.

Image Map Resize
https://github.com/davidjbradshaw/image-map-resizer

jQuery RWD Image Maps
https://github.com/stowball/jQuery-rwdImageMaps



그누보드 게시판에 Image Map Resize 적용 방법
http://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=201

댓글목록 +5

댓글목록

profile_image

테크니션님의 댓글

테크니션 작성일

안녕하세요?
이곳에서 정말 많은 정보를 얻습니다.
감사 합니다.

jQuery RWD Image Maps 을 어떻게 사용하는건지?
조금 자세히 설명해 주시기 부탁드립니다.

그누보드 5.3.3.2 를 사용하고요, 에디터는 치트에디터 5를 사용하고 있습니다.
jquery.rwdImageMaps.js
jquery.rwdImageMaps.min.js
이화일을 어디에 업로드하고,
에디터에 소스를 어떻게 넣는거지요?

감사합니다

profile_image

관리자님의 댓글의 댓글

관리자 작성일

에디터면 이거 먼저 적용해야 합니다.
http://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=227
다른 건 안 해봤고 스마트 에디터에 위 팁 적용 후 Image Map Resize 적용해서 잘 사용하고 있습니다.
js 파일은 아무데나 올려도 상관없고 불러올 때 경로만 맞춰주면 됩니다. 일반적으로는 /js/ 폴더에 올리죠.

profile_image

테크니션님의 댓글의 댓글

테크니션 작성일

http://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=227 를 적용하지 않으면 글쓰기 에디터상에서는
 잘표시되는대, 저장하고 나오면 이미지맵 자체가 표시되지 않더군요.

동일한 소스가 여러군대 있었는대 이거보고해서 성공적으로 출력되엇습니다.
소스를 삽입하는 위치가 한줄 틀리더군요.

그런대
PC에서는 기가 막히게 출력되는대 모바일에서는 위치, 크기가 PC그대로 인것 같아요.
엉뚱한 위치에 넓게 클릭이 되내요.

위의 js파일 두개는 /js디렉토리에 올렸는대요,
게시판 글쓰기에서 (수정)
불러오는 소스를 어느부분에, 어떻게(소스) 넣어야 하는지 부탁 드립니다.

고맙구, 죄송하구 그러내요. 감사합니다.

profile_image

테크니션님의 댓글의 댓글

테크니션 작성일

감사합니다.
그렇게 머리를 썻혔는대,
한방에 깔끔하게 성공............

감사합니다.

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

로그인

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

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

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

Copyright © GNUSTUDY. All rights reserved.