html 왕초보 이미지맵 질문있습니다 ㅠㅠ
안녕하세요
html에 기초도 없이 구글링 복붙만 할 줄아는 사람입니다..
이미지맵이 모바일 상에서 적용이 안되는 바람에
검색을 하다가 모바일에서도 적용가능한 코드가 있다고 해서 쓰고 있는데요
링크걸어둔 영역이 어딘가에 존재하지만
(Tap키 눌러서 엔터 누르면 새로운 창에 해당 링크가 열리긴 합니다)
이미지에 마우스를 가져다 놓아도 보이질 않아 질문드립니다
사진 크기는 1170*659 이구요
</strong></p>
<p><img id="event_img" src="/upload/editor/20200806231318278.png" usemap="#mmap" style="width:100%;"></p>
<p><map name="mmap"></p>
<p><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"></p>
<p><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"></p>
<p><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"></p>
<p><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"></p>
<p><area id="ar5" shape="rect" href="<a href="https://blog.naver.com/PostList.nhn?blogId=urban_univer"" target="_blank" rel="noopener noreferrer">https://blog.naver.com/PostList.nhn?blogId=urban_univer"</a> target="_blank"></p>
<p><area id="ar6" shape="rect" href="/main/" target="_blank"></p>
<p><area id="ar7" shape="rect" href="<a href="https://www.naver.com/"" target="_blank" rel="noopener noreferrer">https://www.naver.com/"</a> target="_blank"></p>
<p></map></p>
<p> </p>
<p><script language="Javascript"></p>
<p><!--</p>
<p>function imageMap(rimg,rwidth,x1,y1,x2,y2,mapid){</p>
<p> var rxsize = document.getElementById(rimg).width;</p>
<p> var xp1 = rxsize / rwidth * x1;</p>
<p> var yp1 = rxsize / rwidth * y1;</p>
<p> var xp2 = rxsize / rwidth * x2;</p>
<p> var yp2 = rxsize / rwidth * y2;</p>
<p> document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;</p>
<p>}</p>
<p> </p>
<p> </p>
<p>imageMap('event_img',1170,1,3,585,220,'ar1');</p>
<p>imageMap('event_img',1170,585,1,1170,220,'ar2');</p>
<p>imageMap('event_img',1170,1,220,585,440,'ar3');</p>
<p>imageMap('event_img',1170,585,220,1170,440,'ar4');</p>
<p>imageMap('event_img',1170,1,440,390,659,'ar5');</p>
<p>imageMap('event_img',1170,390,440,780,659,'ar6');</p>
<p>imageMap('event_img',1170,780,440,1170,659,'ar7');</p>
<p>--></p>
<p></script></p>
<p><strong>
어디가 잘못되어서 어떻게 수정해야
좌표상에 하이퍼링크가 생길지 궁금합니다
원본 코드는
https://sir.kr/bbs/board.php?bo_table=pg_tip&wr_id=12674" target="_blank">https://sir.kr/bbs/board.php?bo_table=pg_tip&wr_id=12674
이곳에서 가져왔습니다
답변 2개
https://noviceany.tistory.com/4">https://noviceany.tistory.com/4 참고해서 새로 작업을 한번 해보세요.
댓글을 작성하려면 로그인이 필요합니다.
이런거 사용해서 적용하면 간편합니다.
Image Map Resize https://github.com/davidjbradshaw/image-map-resizer
답변에 대한 댓글 2개
https://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=311
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
