이미지파일에 자바스크립트 onclick으로 링크를 걸었을 경우,
onMouseOver="this.style.cursor='hand'" 를 쓰거나
style="cursor:hand;" 를 써서 마우스커서를 손모양으로 바꾼다.
1. 기본적인 이미지맵 속성을 이용한 방법
이미지맵은 특성상 링크되는 부분에서 자동적으로 커서가 손모양으로 바뀝니다.
그러나 href속성이 아닌 onclick 이벤트를 이용하는 경우(속성이 아닌 이벤트)
손모양 커서는 나타 나지 않습니다. 따라서 이벤트가 아닌 href속성을 그대로
이용하시면 링크 부분에서 따로 설정없이 손모양이 나타나는것을 보실수
있습니다.
적어주신 소스를 변경한다면 아래와 같이 해주시면 해결 될듯 합니다.
예)
<area shape="rect" coords="456, 29, 557, 49" href="javascript:window.open('링크주소','window','location=no, directories=no, resizable=no,status=no,toolbar=no,menubar=no, width=600, height=500,left=200, top=80, scrollbars=no');return false" onfocus='this.blur()' target="_blank">
단, 사용자가 커서를 지정할수 없으며 오로지 손모양의 커서만 가능합니다.
2. DHTML 을 이용하는 경우 (IE전용)
이경우에는 좀더 다양하게 커서를 이용할수 있으며 속성이든 이벤트던 가리지
않고 스타일이 적용됩니다.
우선 이미지에 id 값을 넣어주시고 map에서 area 설정때 mouseover 이벤트와
mouseout 이벤트에 커서 스타일을 지정해 주시면 됩니다.
예)
<BODY>
<IMG USEMAP="#SystemMap" SRC="이미지주소" BORDER="0" ALT="" id="xxx">
</BODY>
<MAP NAME="SystemMap">
<area shape="rect" coords="0, 0, 50, 50" onclick="window.open('링크주소','xwindow','width=600, height=500,left=200, top=80');return false" onfocus='this.blur()' target="_blank" onmouseover="xxx.style.cursor='help'" onmouseout="xxx.style.cursor='auto'">
</MAP>
댓글 없음:
댓글 쓰기