하이퍼링크 위치 상대적으로 변경시키는 법
본문
아래 1번에 네이버링크 2번에 다음 링크 3번에 sir 링크를 걸었는데 이미지가 width 100%로 변하면서 고정된 하이퍼링크 위치도 상대적으로 변하게 코드를 짰는데 작동을 안 하네요 ㅠㅠ
제 코드를 어떻게 수정하면 좋을지 도움을 좀 주실 수 있으실까요?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<p>
<img height="auto" src="https://sir.kr/data/tmp/3067132580_1729398952.1416.jpg" width="100%" usemap="#image-map" />
</p>
<map name="image-map">
<area target="" alt="" title="" href="https://www.naver.com" coords="162,327,2640,947" shape="rect">
<area target="" alt="" title="" href="https://www.daum.net/" coords="167,1336,2636,1949" shape="rect">
<area target="" alt="" title="" href="https://sir.kr/" coords="164,2501,2636,3109" shape="rect">
</map>
<script type="text/javascript">
$(document).ready(function() {
$('img[usemap]').rwdImageMaps();
});
</script>
답변 1
이미지를 받아서 확인해 보니 이미지맵 좌표가 잘 못 되어 있습니다.
좌표 다시 잡은 코드입니다.
<map name="image-map">
<area target="_blank" alt="" title="" href="https://www.naver.com" coords="94,541,1498,192" shape="rect">
<area target="_blank" alt="" title="" href="https://www.daum.net/" coords="99,766,1506,1118" shape="rect">
<area target="_blank" alt="" title="" href="https://sir.kr/" coords="95,1431,1502,1785" shape="rect">
</map>
감사해요
답변을 작성하시기 전에 로그인 해주세요.
