이미지 맵에 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>
'Local Oriented > jQuery' 카테고리의 다른 글
그래프 Chart 차트 (자바스크립트, jQuery, Flex, Flash, SilverLight) (0) | 2011.06.02 |
---|---|
jQuery API, 전체 그림과 관련 링크 (0) | 2011.05.27 |
jQueryUI 로 팝업 사용시 팝업에 사용된 input 등의 컨트롤은 팝업 용도로만 사용 가능 (0) | 2011.04.29 |
jsCarousel 2.0.0, jQuery 기반의 이미지 슬라이드 플러그인 (2) | 2011.04.28 |
jQuery 1.4.x 입문서, jQuery Cookbook (실전 jQuery 쿡북) v1.4.x 증보판 (10) | 2011.02.15 |