본문 바로가기

Local Oriented/jQuery

이미지 맵에 jQuery attr 함수를 사용하여 '손' 모양의 커서를 붙이면서 링크 거는 방법


이미지 맵에 bind 함수로 click 이벤트를 넣으면 작동은 하는데..
이미지에서 이미지 맵에 설정된 곳에 '손' 모양의 커서가 나오지 않아요.
css 함수로 커서를 넣으려고도 해 보고, addClass 함수를 써 봐도 소용이 없더군요.
area 태그에 href 를 추가하면 '손' 모양의 커서가 표시되기는 하지만.. 클릭하면 엉뚱한 결과가 나오져..

그래서, bind 는 포기하고.. attr 함수를 써서 'href' 속성에 값을 넣도록 하니 커서 모양도 바뀌고, 제대로 돌아갑니다..
아래 예에서는 shape 을 poly 로 주었는데, 다른 속성을 사용해도 마찬가지 입니다.
openThis 함수는 별도로 만들어져 있는데.. 그냥, window.open 에 파라미터 주는 거라서 생략.
링크 달때, href 속성에는 javascript:함수명, onClick 류의 이벤트 속성에는 함수명 만 사용하면 되는거 아시죠..!!

<img src="..." usemap="#Map2" />
<map name="Map2" id="Map2">
  <area id="a00" shape="poly" coords="..." />
  <area id="a01" shape="poly" coords="..." />
  <area id="a02" shape="poly" coords="..." />
  <area id="a03" shape="poly" coords="..." />
  <area id="a04" shape="poly" coords="..." />
  <area id="a05" shape="poly" coords="..." />
  <area id="a06" shape="poly" coords="..." />
  <area id="a07" shape="poly" coords="..." />
  <area id="a08" shape="poly" coords="..." />
  <area id="a09" shape="poly" coords="..." />
  <area id="a10" shape="poly" coords="..." />
  <area id="a11" shape="poly" coords="..." />
</map>

<script>
  var i0 = [...]; // 한 곳에서 사용할 배열 값들
  var i1 = [...]; // 한 곳에서 사용할 배열 값들
  var i2 = [...]; // 한 곳에서 사용할 배열 값들
  for(var i=0,z=12; i<z; i++){
   $o = $('#a'+(i>9 ? i : '0'+i)); // href 속성에 링크를 달기 위해서
    $o.attr('href', 'javascript:openThis(Number('+$o.attr('id').substr(1,2)+'))') // javascript: 를 넣지 않으면 대략 난감
//    .bind('click',function(e){ openThis(Number(this.id.substr(1,2))); }) /* 커서 모양을 '손' 이 되게 할 수 없더군요 */
    .attr('alt',i0[i]+ '. ' +i1[i]+ ', ' +i2[i]); // 풍선 도움말, KWCAG 맞추려면 넣어야져
  }
</script>