jQuery 자바스크립트 이미지 좌표구해 영역 설정하기 마우스 손가락 표시

 

jQuery 자바스크립트 이미지 좌표구해 영역 설정하기 마우스 손가락 표시

 

이미지의 특정영역을 클릭했을 때 이벤트를 발생하기 위해 사용한다.

 

우선 영역을 구하기 위해서는 해당 이미지 영역의 좌표를 필요로 한다.

이미지의 좌표를 구하는 방법은 아래와 같다.

 

이미지에 onClick 이벤트를 준다.

<img onClick="javascript:getLoc()">

 

- 이미지의 좌표를 구하는 함수

function getLoc(){

var x = event.offsetX;

var y = event.offsetY;

alert("현재좌표는 : "+x+" / "+y);

}

 

이렇게 하면 이미지의 x, y 좌표 값을 구할 수 있다.

 

그렇다면 영역을 설정하는 방법을 알아보자.

이미지의 영역을 설정하기 위해서는 이미지 맵을 사용한다.

이미지 맵은 이미지에 복수의 영역을 설정할 때 사용한다.

 

<img src=이미지.png usemap="#Map">
 
<map name="Map" id="Map">
    <area shape="rect" coords="170,108,299,129" onClick="javascript:popup(1)" tabindex="1">
    <area shape="rect" coords="221,323,344,342" onClick="javascript:popup(2)" tabindex="2">
</map>

 

coords는 해당 영역의 좌측상단 좌표와 우측하단 좌표를 설정해 주면 된다.

 

 

 

이렇게 하면 해당 영역이 설정된다.

영역을 클릭할 경우 popup 함수가 호출된다.

 

위의 소스에 tabindex를 준 이유는 이미지 클릭 후 tab버튼을 클릭해 넘어가는 영역의 순서를 정해주기 위해서다.

 

그리고 영역에 마우스 오버를 했을 때 손가락 모양을 주기 위해서는 href="#" 를 <area> 태그에 추가해 준다.

(혹은 style="cursor:pointer" 를 지정해 준다.)

<area shape="rect" coords="170,108,299,129" onClick="javascript:popup(1)" tabindex="1" href="#">

(일반적으로 사용하는 style="cursor:pointer" 는 적용이 안된다.)

 

그럼 설정된 영역위에 마우스가 올라가면 손가락 커서로 변경된다.

 

 

 

-------------2017.08.09 추가 -----------------

 

이미지 특정 영역에 마우스 오버 시 이미지 표출

  

      <div class="shop01">
                <img src="../resource/images/restplan01.png" alt="낙동강구미휴게소 배치도" usemap="#plan01"/>
               <div id="linkA1" class="shoppop shop1"></div>
               <div id="linkA2" class="shoppop shop2"></div>
               <div id="linkA3" class="shoppop shop3"></div>
               <div id="linkA4" class="shoppop shop4"></div>
               <div id="linkA5" class="shoppop shop5"></div>
               <div id="linkA6" class="shoppop shop6"></div>
               <div id="linkA7" class="shoppop shop7"></div>
               <div id="linkA8" class="shoppop shop8"></div>
               <div id="linkA9" class="shoppop shop9"></div>
               <div id="linkA10" class="shoppop shop10"></div>
     </div>
     <map name="plan01" id="plan01" class="plan">
              <area shape="rect" coords="167,40,212,84" id="#linkA1" href="#"/>
              <area shape="rect" coords="212,40,256,84" id="#linkA2" href="#"/>
              <area shape="rect" coords="256,40,300,84" id="#linkA3" href="#"/>
              <area shape="rect" coords="299,40,344,84" id="#linkA4" href="#"/>
              <area shape="rect" coords="74,143,117,168" id="#linkA5" href="#"/>
              <area shape="rect" coords="72,86,101,123" id="#linkA6" href="#"/>
              <area shape="rect" coords="500,27,519,84" id="#linkA7" href="#"/>
              <area shape="rect" coords="381,144,521,168" id="#linkA8" href="#"/>
              <area shape="rect" coords="120,144,162,169" id="#linkA9" href="#"/>
              <area shape="rect" coords="410,27,500,84" id="#linkA10" href="#"/>
     </map>

 

 

 $('area').mouseover(function(){
      var showId = $(this).attr('id');
      $(showId).show();
 });
 
 $('area').mouseout(function(){
      var hideId = $(this).attr('id');
      $(hideId).hide();
 });

shop01 클래스 내의 div에는 백그라운드로 이미지가 깔려있다.

image map 에 area에 mouseover, out 시 해당 id 값을 받아 div를 보이고 안보이고 하면 된다.