모바일에서 이미지맵 좌표
본문
안녕하세요?
이미지맵으로 검색해보고 답변되있는것 전부 해봤습니다.
그중에
http://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=227 에 따라서 성공했습니다.
그런대
PC에서는 기가 막히게 출력되는대 모바일에서는 위치, 크기가 PC그대로 인것 같아요.
엉뚱한 위치에 넓게 클릭이 되내요.
또 검색에 검색을 했는대요.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
(function($){
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script> 삽입하면 크기에따른 위치조정이 된다고 해서 위로, 아래로 붙혀보고.........
아무리 해봐도 모바일에서 위치조절이 않되내요.게시글 수정에서 HTML로 보면 아래와 갓습니다.
-----
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
(function($){
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
<p style="text-align: center;">
<img src="/data/editor/1908/20190829132105_ead7030e0bb5716697363e6f7fdcd405_2ok5.jpg" border="0" usemap="#a1">
<map name="a1">
<area shape="rect" coords="55,62,425,200" href="http://parts.needpartsinc.com/bbs/board.php?bo_table=1001&wr_id=6" target="_blank">
</map></p>
이 소스에 잘못되 부분이 있어서 그런가요?
살표봐 주십시요.
태스트해보고있는 주소는
http://parts.needpartsinc.com/bbs/board.php?bo_table=9001&wr_id=14
좌측 맨위의 그림에만 적용하고 태스트 중입니다.
모바일에서도 사용할수 있게 부탁드립니다.
답변 3
스크립트를 에디터 내용 안에다 넣지 말고
사용하고 있는 게시판 스킨 view.skin.php 파일에 추가하세요.
그리고 이건 중복되기 때문에 추가하면 안 됩니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
그거 쓰지 마시고. Image Map Resize 사용해보세요.
다시 직접 해봤는데 잘됩니다.
http://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=201
스크립트 에러 나네요
/* (function($){ 필요없는 부분*/
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
여기에서 플러그인 다운로드 클릭하고, js 파일을 직접 다운받아서
서버에 올린 후 경로를 수정해주세요.
jquery.rwdImageMaps.js 와 jquery.rwdImageMaps.min.js
두파일을 js디렉토리에 올리고 경로수정했습니다.
절대경로 로 해보고 상대경로로도 해봤습니다.
<script src="http://parts.needpartsinc.com/js/jquery.min.js"></script>
<script src="http://parts.needpartsinc.com/js/jquery.rwdImageMaps.min.js"></script>
적용되지 않는대요.
또 다른곳 채크해 볼때가 있나요?
