이미지맵

#이미지맵

jquery.rwdImageMaps.js

0.00MB

jquery.rwdImageMaps.min.js

0.00MB

<img src="/images/visual2.png" alt="img" usemap="#banner_Map" hidefocus="true">
<map name="banner_Map" id="banner_Map">
   <area shape="rect" coords="413,455,618,513" href="/product_view.php">
</map>

1.img의 usemap과 map의 name과 id를 일치시켜준다.

2.shape="속성값"은 영역의 모양을 의미한다.

- react : 직사각형(왼쪽 상단 좌표와 오른쪽 하단 좌표)

- circle : 원형 모양(원중심의 좌표와 반지름을 지정)

- poly : 형 영역(다각형의 가장자리의 좌표를 지정)

- default : 전체 영역

3.coords="정의"는 영역의 좌표를 의미한다.

-이미지 맵의 좌표의 경우 그림판에 이미지를 띄운후 쉽게 확인 가능하다.

 

*간단하게 좌표 확인하기

www.image-map.net/

Free Online Image Map Generator

<script src="/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function() {
  $('img[usemap]').rwdImageMaps();
  $("area").attr("hidefocus", "true").attr("onFocus","blur()");
});
</script>

/*이미지맵*/
img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}
@media (max-width: 991px) {
  img[usemap] {
     border: none;
     height: 100% !important;
     max-width: 100%;
     width: 100% !important;
  }
}

 

*onFocus blur()의 경우 ie에서 이미지에 점선으로 선이 생기는 것을 방지하는 outline:0; 과 같은 효과이다.