html 왕초보 이미지맵 질문있습니다 ㅠㅠ

html 왕초보 이미지맵 질문있습니다 ㅠㅠ

QA

html 왕초보 이미지맵 질문있습니다 ㅠㅠ

답변 2

본문

안녕하세요

 

 

html에 기초도 없이 구글링 복붙만 할 줄아는 사람입니다..

 

이미지맵이 모바일 상에서 적용이 안되는 바람에

 

검색을 하다가 모바일에서도 적용가능한 코드가 있다고 해서 쓰고 있는데요

 

링크걸어둔 영역이 어딘가에 존재하지만

 (Tap키 눌러서 엔터 누르면 새로운 창에 해당 링크가 열리긴 합니다)

이미지에 마우스를 가져다 놓아도 보이질 않아 질문드립니다

 

사진 크기는 1170*659 이구요

 

 


<img id="event_img" src="/upload/editor/20200806231318278.png" usemap="#mmap" style="width:100%;">
<map name="mmap">
<area id="ar1" shape="rect" href="/gallery.es?mid=a10301000000&bid=0001&b_list=9&act=view&list_no=13&nPage=2&vlist_no_npage=0&keyField=&orderby" target="_blank">
<area id="ar2" shape="rect" href="/gallery.es?mid=a10301000000&bid=0001&b_list=9&act=view&list_no=23&nPage=2&vlist_no_npage=0&keyField=&orderby=" target="_blank">
<area id="ar3" shape="rect" href="/gallery.es?mid=a10301000000&bid=0001&b_list=9&act=view&list_no=28&nPage=1&vlist_no_npage=0&keyField=&orderby=" target="_blank">
<area id="ar4" shape="rect" href="/gallery.es?mid=a10301000000&bid=0001&b_list=9&act=view&list_no=29&nPage=1&vlist_no_npage=0&keyField=&orderby=" target="_blank">
<area id="ar5" shape="rect" href="https://blog.naver.com/PostList.nhn?blogId=urban_univer" target="_blank">
<area id="ar6" shape="rect" href="/main/" target="_blank">
<area id="ar7" shape="rect" href="https://www.naver.com/" target="_blank">
</map>
 
<script language="Javascript">
<!--
function imageMap(rimg,rwidth,x1,y1,x2,y2,mapid){
 var rxsize = document.getElementById(rimg).width;
 var xp1 = rxsize / rwidth * x1;
 var yp1 = rxsize / rwidth * y1;
 var xp2 = rxsize / rwidth * x2;
 var yp2 = rxsize / rwidth * y2;
 document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;
}
 
 
imageMap('event_img',1170,1,3,585,220,'ar1');
imageMap('event_img',1170,585,1,1170,220,'ar2');
imageMap('event_img',1170,1,220,585,440,'ar3');
imageMap('event_img',1170,585,220,1170,440,'ar4');
imageMap('event_img',1170,1,440,390,659,'ar5');
imageMap('event_img',1170,390,440,780,659,'ar6');
imageMap('event_img',1170,780,440,1170,659,'ar7');
-->
</script>

 

어디가 잘못되어서 어떻게 수정해야

좌표상에 하이퍼링크가 생길지 궁금합니다 

 

원본 코드는

https://sir.kr/bbs/board.php?bo_table=pg_tip&wr_id=12674

이곳에서 가져왔습니다

이 질문에 댓글 쓰기 :

답변 2

이런거 사용해서 적용하면 간편합니다.

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #html ×
전체 1,125
© SIRSOFT
현재 페이지 제일 처음으로