웹마스터 팁

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

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'로 쓰시는 분들도 많더라구요.
제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] file PHASE 2004.01.19
스크롤바 색상을 아름답게. [17] file 해리포터포에버 2003.12.16
마우스 커서에 대해서... [16] file impre 2003.09.20
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] file PHASE 2003.09.08
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] file 토끼군 2003.08.20
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] file @kihwa 2003.07.26
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
css3 안쪽과 바깥쪽 그림자 만들기 입니다 file 낮은자 2014.03.06
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
노프레임 홈페이지 만들기 강좌 file H.N커뮤니티 2009.02.28
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
css 정리 파일(한글) [3] file 미곰탱 2009.01.22
스크립트 모음 [1] file *이종민* 2008.11.29
계산기 [1] file *이종민* 2008.11.29
바탕화면에 바로가기 만들기 file *이종민* 2008.11.29