이미지의 부분마다 다르게 링크를 연결하기 : img map 반응형

IMG MAP

이미지의 부분마다 링크를 다르게 연결하고 싶다면

<map>을 사용해주면 된다.

 

이미지 태그에는 usemap="#맵핑명" 을 추가해주고

맵 태그에는 name="맵핑명" 으로 연결해주면 적용이 된다 :)

<img src="http://via.placeholder.com/1200x1150" alt="sample" usemap="#testmap">
<map name="testmap">
    <area shape="rect" coords="345, 535, 829, 619" href="http://naver.com" target="_blank">
</map>

 

좌표는 어떻게 구할까? 라고 한다면 포토샵, 그림판과 같은 이미지 에디터 프로그램을 통해 구할 수 있다.

포토샵으로도 좌표를 구해봤지만 이상한 곳으로 좌표가 찍히길래

그림판으로 좌표를 찾아서 적용했더니 정상 작동한다!

 

시작점 x, y

끝나는 점 x1,y1

 

​

참고로 서치하다 image map 에디터 사이트를 발견해서 나중에 쓸 일 있을까 해서 기록해 둔다.

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

 

 

반응형 MAP

좌표 기준이기 때문에 반응형 웹에서 구현이 안된다는 문제점이 있는데

jQuery로 이 부분을 해결할 수 있다.

<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>
<script>
        $('img[usemap]').rwdImageMaps()
</script>