웹마스터 팁

마우스 커서에 대해서...

2003.09.20 19:32

impre

어디다 올려야 될지를 모르겠는데, 여기가 가장 성격에 맞을것 같습니다.
질문/답변 란에서 어떤분이 물으셨길래...찾아봐도 없으시다는 말씀을 듣고 도움이 되지 않을까 해서 올립니다.

마우스 커서 바꾸는게 왜 필요한가? 라고 물으신다면 다음 두 경우를 비교를 해보죠.

이미지에 링크를 걸때 어떤 방법을 사용하십니까?

1. <a href='링크주소'><img src='이미지주소'></a>
2. <img scr='이미지주소' onclick="javascript:document.location.href='링크주소'">

막 홈페이지 제작에 접하신 분들은 당연히 1번이 아니냐 하실거구...
어느정도 만들어보신 분들은 2번으로 하시고 계실겁니다.

2번으로 써야될 경우는 보통 윈도우창 밑에 상태바에 링크표시를 보이기 싫다거나, style 에서 링크시 underline이 쳐지게 했다거나....등등의 이유에서 이미지 링크는 2번 방법을 사용하실 겁니다.

그럼 지금처럼 2번 그대로 사용하시게 된다면 링크를 저렇게 걸어놔도(정확히 말하면 링크는 아니지만..) 그 그림이 링크가 걸려있는건지 어떤건지 사용자들은 모르게 되죠.

비교를 해볼까요??

1. <img src='http://www.nzeo.com/images/main/top_btn_2_on.gif' onclick="javascript:window.open('http://kr.yahoo.com','yahoo');">
2. <img src='http://www.nzeo.com/images/main/top_btn_2_on.gif' onclick="javascript:window.open('http://kr.yahoo.com','yahoo');" onmouseover="this.style.cursor='hand'">

1번과 2번 그림 모두 클릭을 하면 야후 사이트의 새창이 띄워집니다.

차이점은 그림 위에 마우스를 가져다 놓으면 1번은 아무런 변화가 없는데.. 2번은 마우스커서가 손가락 모양으로 바뀌면서 클릭을 하면 무언가가 일어날것만 같이 보이죠?? ^^

이때문에 마우스 커서를 바꾸는 일이 필요하게 됩니다.

2번 태그를 보게 되면
<img src='http://www.nzeo.com/images/main/top_btn_2_on.gif' onclick="javascript:window.open('http://kr.yahoo.com','yahoo');" onmouseover="this.style.cursor='hand'">

onmouseover="this.style.cursor='hand'"
이부분이 더 들어가있습니다.

onmouseover 는 마우스가 올라왔을때 발생하는 이벤트를 말합니다. 마우스가 올라왔을때 마우스커서모양을 'hand'로 바꾸라는것이죠.

간단하죠?? ^^

그럼 'hand' 모양 말고 어떤 모양이 있는지 살펴보죠.

cursor_crosshair.gif : 'crosshair'
cursor_hand.gif : 'hand'
cursor_move.gif : 'move'
cursor_e-resize.gif : 'e-resize' or 'w-resize'
cursor_nw-resize.gif : 'nw-resize' or 'se-resize'
cursor_ne-resize.gif : 'ne-resize' or 'sw-resize'
cursor_n-resize.gif : 'n-resize' or 's-resize'
cursor_text.gif : 'text'
cursor_wait.gif : 'wait'
cursor_help.gif : 'help'

등이 있습니다.

'hand' 대신 원하는 모양으로 바꾸면 되겠지요??

종종 'crosshair'로 쓰시는 분들도 많더라구요.
제목 글쓴이 날짜
[주옥시리즈] 타이틀 제어 애드온 socialskyo 2013.09.09
외부페이지에서 로그인 폼 구현하기 컴퓨터매니아 2013.09.09
[주옥 시리즈]지식인XE 모바일에서도 답변보기 socialskyo 2013.09.08
[주옥시리즈]글 목록을 조회수 별로 색상 지정하기 [9] socialskyo 2013.09.06
댓글 새로고침 수정 [22] Lansi 2013.09.06
댓글 작성, 추천후 다운로드 받을수 있게 하기. [6] socialskyo 2013.09.06
위젯 페이지에서 첨부파일 100%로 파일이 업로드되지 않을 때 이온디 2013.09.04
내가 작성한 글 에서 해당 글의 댓글 수 출력하는 방법 [1] sejin7940 2013.09.03
메일링 가입 인증 폼 부터 ..가입인증 메일 제목 가입인증 메일 코드 부분의 에러로 , msg_confirm_account_title 메일 주소가 이렇게 표기되어 오던 [3] file 애드바이러스 2013.09.02
SSL 환경에서 메시지톡 쪽지 보내기, 친구 찾기, 메시지 삭제 등 안될 때 [2] Arisae 2013.09.02
모든 페이지에 공통된 내용을 적용하기. [3] 컴퓨터매니아 2013.09.01
회원가입확장 모듈 - 가입절차중 오류 발생시 처음으로 돌아가는 현상 [1] 김개발 2013.08.30
IE8에서 이미지 자동 리사이징 높이 고정 문제 해결법 GGobugi 2013.08.29
장포크님의 더보기 팁 - 소스 줄임 낭만구미호 2013.08.26
네이버 SMTP로 인증메일 보내기 [12] Neder 2013.08.26
XE 기본 메시지창에서 '로그인' 대신 '돌아가기' 나오도록 하기 [2] file 컴퓨터매니아 2013.08.25
scm player 팝업 제외하기 [1] 귀머거리하늘 2013.08.25
계정 정지된 회원에게 정지 사유 표시하기. [24] file 컴퓨터매니아 2013.08.24
카페XE를 Domain 접속으로 설정 후 관리페이지 접속 불가할때 [1] 라르게덴 2013.08.24
나름 강력할 것 같은 스팸방지 팁 [16] 꿈섬 2013.08.23