이미지맵 사용, 반응형에 적용법

 imagemap 이라고 , 이미지의 특정 부분을 하이퍼링크시키고자 할때 유용하다.

예전엔 나모로 만들곤 했는데, 웹상에서 이미지를 업로드하고 이미지맵을 만드는 참 좋은 사이트도 있다.

 

1. 이미지맵 만들어주는 사이트

참고 https://yoonsidae.tistory.com/39

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

maschek.hu - Online Image Map Editor

이미지 업로드,또는 웹상의 이미지주소를 넣은 후 영역을 사각(rectangle), 원(circle) 등으로 지정하고, code를 누르면 html 소스 코드가 만들어진다.

링크를 여럿 주기위해서 , 여러 영역을 지정할 수 도 있다. 0번 부터 지정이 된다. 

 

2. 반응형 이미지맵 적용

이미지가 크거나 할 경우, 스마트폰, PC등에서 보여질때 넘 작거나, 넘 커서 화면을 넘어버리거나 하면 곤란하다.

그래서 화면안에서 보기 좋게 반응형으로 만들어주기 위해

1에서 참고로 준 사이트, github 의 jqueryRwimagemaps 를 이용하면 된다.

 

나는 다음과 같이 하여 이미지맵을 만들었다.

<!-- jQuery 異   -->

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

<!-- map plugIn 異   -->

<script src="./jquery.rwdImageMaps.min.js"></script>

<!-- usemap script -->

<script>

$(document).ready(function(e) {

$('img[usemap]').rwdImageMaps();

});

</script>







<img src="./dep.jpg" usemap="#Map" border="0" style="max-width:100%;height:auto;">

<map name="Map" id="Map">

<area shape="rect" alt="  Šœ釉Œ" title="" coords="1534,774,1887,1058" href="http://youtube.com" target="_self" />


</map>

alt(마우스 얹었을때 표시되는 내용) 부분이 깨져보이네.. utf-8로 작성한거라 그른듯. ..

 

img src 의 속성부분의 usemap = 과 

map name id 부분의 id 와 같게 해주어야한다.

그리고 

area 부분은 위 맵만들어주는 사이트로 작성함.