ImFe's study

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

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/

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

'WEB' 카테고리의 다른 글

[NVM] macOS에서 nvm을 이용하여 node버젼 설치 시 너무 오래걸리는 문제  (0) 2023.06.13
[Vue] 변수의 3depth 이상 변수 <template>에서 사용시 오류 해결?  (0) 2023.02.07
[WEB] html input type=number 사용 시 카운터 없애기  (0) 2023.01.12
[Vue] VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior 오류  (2) 2022.12.16
[WEB] 배포시 CSS opacity가 1%로 고정되는 버그 해결  (0) 2022.12.14
'WEB' Related Articles more
Comments