WEB

[WEB] rwdImageMaps를 이용한 이미지맵 좌표 반응형 변환

ImFe 2023. 2. 3. 19:23

rwdImageMaps?

rwdImageMaps는 이미지 맵을 사용할 시 반응형 웹을 위해 좌표를 다시 계산해주는 제이쿼리 플러그인이다.

제이쿼리를 굳이 지양할 필요가 없는 프로젝트에서 빠르게 랜딩 페이지 제작할 때 도움이 된다

ex)

..
<head>
  <!-- 제이쿼리를 먼저 불러와야한다 -->
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jquery.rwdImageMaps.min.js"></script>
</head>

<body>
    <div class="container">
        <div><img src=".." alt="배경 이미지" usemap="#pc-map"></div>
        ..
        <map name="pc-map">
            <area href="링크 입력" coords="좌표 입력" shape="rect">
            <area href="링크 입력" coords="좌표 입력" shape="rect">
            ..
        </map>
    </div>
</body>
..

좌표를 입력하는 부분의 경우

https://www.image-map.net/

아래 사이트를 이용하여 쉽게 좌표를 추출할 수 있다.