[plugIn] 반응형 이미지 링크 걸기(jQuery-rwdImageMaps)

[plugIn] 반응형 이미지 링크 걸기

반응형 이미지에 링크를 걸어서 제작하는게 쉽지 않다.

jQuery plugin을 사용하여 이미지에 맞는 링크를 걸 수 있는 플러그인을 소개하고자 한다.

(반응형조직도를 만들 때 많이 쓴다.)

 

1. 세팅준비

jQuery-rwdImageMaps에 들어가 jquery.rwdImageMaps.js 또는 jquery.rwdImageMaps.min.js을 다운받아 넣는다. 이 때 주의할 점은 jQuery가 먼저 오도록 한다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>

 

2. 이미지준비

https://www.image-map.net/ 에 들어가 원하는 이미지를 넣어 라인을 따라 만든다.

Active	Shape	Link	Title	Target
현재 진행중인 이미지 맵	- Rect -Poly -Circle	클릭 시 링크 주소로 연결	이미지 title	a 태그 타겟

자세한 설명은 w3schools.com > ImageMap

코드를 복사해 body 태그 안에 넣어준다.

 

3. 마지막

1번의 script아래에 아래코드를 추가해준다.

<script>
    // jQuery
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>

 

CSS를 추가해 이미지를 반응형으로 만든다.

img[usemap] {
    border: none;
    width: auto;
    height: auto;
    max-width: 100%;
}

 

끝!

 

Demo

 

Reference

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

jQuery-rwdImageMaps

간편하게 이미지맵 생성한 후 반응형 적용하기