2023. 3. 21. 17:11ㆍHTML
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형으로 이미지맵을 생성하는 방법을 공유하겠습니다.
적응형 이미지맵 처리
적응형으로 이미지맵을 생성하는 방법은 이전 포스팅 참고하시면 되겠습니다.
[HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법
이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다.
dev-chim.tistory.com
반응형으로 이미지맵을 처리해 주는 깃헙 사이트 - jQuery-rwdImageMaps
아래 링크를 참조하셔서 소스 코드를 다운로드하시길 바랍니다.
GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
Responsive Image Maps jQuery Plugin. Contribute to stowball/jQuery-rwdImageMaps development by creating an account on GitHub.
github.com
jQuery-rwdImageMaps 사용 예시
jQuery-rwdImageMaps는 기본적으로 jQuery 기반으로 플러그인이 만들어졌기 때문에, jQuery 라이브러리를 먼저 불러와줘야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha512-eZB7hQa0bRlrKMQ2njpP0d/Klu6o30Gsr8e5FUCjUT3fSlnVkm/1J14n58BuwgaMuObrGb7SvUfQuF8qFsPU4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
위에 참조한 github 사이트에서도 확인하실 수도 있지만, 사용법을 설명드리자면 간단합니다.
스크립트에$('img [usemap]'). rwdImageMaps();를 호출하면 됩니다.
맵 좌표값은 적응형에서 적용했던 방법처럼 똑같이 입력하시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="이미지경로" alt="대체텍스트" usemap="#맵네임">
<map name="맵네임">
<area shape="도형유형" coords="좌표" alt="대체텍스트" href="링크경로" title="타이틀" target="_blank">
</map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha512-eZB7hQa0bRlrKMQ2njpP0d/Klu6o30Gsr8e5FUCjUT3fSlnVkm/1J14n58BuwgaMuObrGb7SvUfQuF8qFsPU4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>
이상으로 간단하게 반응형으로 이미지맵을 적용시키는 방법에 대해서 알아보았습니다.
'HTML' 카테고리의 다른 글
| [HTML] 를 활용하여 반응형 디자인에서 글자 떨어짐 조절하기 (4) | 2024.03.11 |
|---|---|
| [HTML] video vs iframe, 어떤 것이 더 적합할까? (0) | 2023.04.11 |
| [HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법 (0) | 2023.03.21 |