이미지맵 반응형 적용방법
이미지에 링크를 삽입할 때, 이미지맵(image map)을 사용합니다.
이때 이미지맵은 css로 반응형 제작이 어렵기 때문에 스크립트로 수정해줘야하는데요.
플러그인으로 간단하게 처리하는 방법에 대해 알아보겠습니다.
[github]
https://github.com/stowball/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
위의 공식 github에서 다운로드받을 수 있습니다.
[html]
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>jquery 기반이기 때문에 jquery와 함께 사용하고 <head></head>에 넣어주시면 됩니다.
<img src="이미지경로" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="23,40,364,159" shape="rect">
<area target="" alt="" title="" href="" coords="393,17,570,186" shape="0">
</map>[css]
img {max-width: 100%}반응형 이기 때문에 img에 max-width:100%을 넣어줍니다.
[js]
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>$('img[usemap]').rwdImageMaps(); 을 넣어주면 이미지맵을 반응형으로 적용할 수 있습니다.
아래 포스팅은 이미지맵을 만들어주는 사이트입니다.
[HTML] 이미지맵 태그(map, area ) 사용 방법, 쉽게 만들어주는 사이트
이미지맵 태그(map,area) 이미지맵 태그, 즉 html에서의 map태그는 이미지맵을 만드는 태그입니다. 간단하게 이미지파일(jpg, png)에 링크를 걸어주는 태그라고 생각하시면 됩니다 :) 사실, 요즘에는 잘
eunyoe.tistory.com
'Web > 플러그인' 카테고리의 다른 글
| animate.css 사용법 (0) | 2023.02.07 |
|---|---|
| [imgLiquid] 반응형 이미지 이미지리퀴드 사용법 (0) | 2021.07.28 |
| [차트 플러그인] c3.js 시작하기 사용법 및 옵션 (0) | 2021.07.14 |
| [jQuery] 무료 차트(chart) 플러그인 정리 (0) | 2021.04.28 |
| chart.js를 사용해 막대 그래프 그리는 법 (예제 多) (0) | 2021.04.13 |