[JavaScript] 반응형 이미지 좌표값 구하기(jQuery RWD Image Maps)
Lpla
·2021. 1. 7. 21:36
이미지맵으로 하나의 이미지에 위치마다 여러 개의 링크를 걸거나 여러 개의 함수를 실행할 수 있다.
하지만 반응형의 경우 좌표가 매번 달라지기 때문에 일반적인 방법으로는 사용이 어렵고
rwdImageMaps 자바스크립트 라이브러리를 통해 정상적으로 이미지맵을 사용할 수 있다.
Responsive Image Maps jQuery Plugin
Responsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from github This image map was created in minutes wi
mattstow.com
이 라이브러리는 사용방법도 간단하고 쉽다.
프랑스 국기로 예제를 만들어보겠다.
이미지맵을 만드는 방법은 여러가지 있겠지만 나는 아래 사이트를 추천한다.
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
1. 이미지를 첨부할지, 웹사이트 링크를 가져올지 정한다.
2. 여기서는 위키피디아의 이미지주소를 사용했다.
3. 원하는 영역을 지정한다.
Link나 Title, Target은 나중에 따로 코드를 작성해서 추가할 수 있으니 지금 굳이 하지 않아도 된다.
4. 마지막으로 생성된 코드를 가져온다.
이것으로 이미지맵 코드는 만들었으니 rwdImageMaps 을 사용하여 반응형에 적용해보자.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script>
</head>
<body>
<section>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_France.svg" usemap="#image-map">
<map name="image-map">
<area alt="파란색" href="#" title="파란색" coords="1,0,300,599" shape="rect">
<area alt="흰색" href="#" title="흰색" coords="302,0,600,599" shape="rect">
<area alt="빨간색" href="#" title="빨간색" coords="602,0,900,599" shape="rect">
</map>
</section>
</body>
</html>
CSS
img { width: 100%; }
JS
$(function() {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function () {
alert($(this).attr('alt') + ' 입니다.');
});
});
HTML에는 제이쿼리와 rwdImageMaps 자바스크립트를 가져오고
자바스크립트에 $('img[usemap]').rwdImageMaps(); 만 입력하면 된다.
반응형 이미지를 위해 CSS에 img { width: 100% } 를 추가했다.
여기서는 각 색깔을 클릭하면 어떤 색인지 경고창이 뜨도록 만들었다.
테스트 결과 반응형에서도 좌표를 잘 인식하는 것이 확인된다.
