웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 커서에 대해서...
2003.09.20 19:32
어디다 올려야 될지를 모르겠는데, 여기가 가장 성격에 맞을것 같습니다.
질문/답변 란에서 어떤분이 물으셨길래...찾아봐도 없으시다는 말씀을 듣고 도움이 되지 않을까 해서 올립니다.
마우스 커서 바꾸는게 왜 필요한가? 라고 물으신다면 다음 두 경우를 비교를 해보죠.
이미지에 링크를 걸때 어떤 방법을 사용하십니까?
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' 모양 말고 어떤 모양이 있는지 살펴보죠.
: 'crosshair'
: 'hand'
: 'move'
: 'e-resize' or 'w-resize'
: 'nw-resize' or 'se-resize'
: 'ne-resize' or 'sw-resize'
: 'n-resize' or 's-resize'
: 'text'
: 'wait'
: 'help'
등이 있습니다.
'hand' 대신 원하는 모양으로 바꾸면 되겠지요??
종종 'crosshair'로 쓰시는 분들도 많더라구요.
질문/답변 란에서 어떤분이 물으셨길래...찾아봐도 없으시다는 말씀을 듣고 도움이 되지 않을까 해서 올립니다.
마우스 커서 바꾸는게 왜 필요한가? 라고 물으신다면 다음 두 경우를 비교를 해보죠.
이미지에 링크를 걸때 어떤 방법을 사용하십니까?
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](/files/attach/images/19360727/992/365/019/fd3272afc0b01efc88c96664b8fe67d5.gif)
![cursor_hand.gif](/files/attach/images/19360727/992/365/019/15c9c8f474c1b0658a522046d2ee47be.gif)
![cursor_move.gif](/files/attach/images/19360727/992/365/019/c3edfefb6e5f3cf65cf07400baf6c2b8.gif)
![cursor_e-resize.gif](/files/attach/images/19360727/992/365/019/4302e419858aef6875eef3ea3cf56333.gif)
![cursor_nw-resize.gif](/files/attach/images/19360727/992/365/019/724b20cc071710b5fd90c2367d5e9a3d.gif)
![cursor_ne-resize.gif](/files/attach/images/19360727/992/365/019/fbf02e9f54bd9eb7a35a19b9646b4af1.gif)
![cursor_n-resize.gif](/files/attach/images/19360727/992/365/019/3c6d6322be846476bb8b49379c4de7b1.gif)
![cursor_text.gif](/files/attach/images/19360727/992/365/019/4fc2c04415e57e087ce5d07837d0f606.gif)
![cursor_wait.gif](/files/attach/images/19360727/992/365/019/5967dfbb1b91ed3c41b2c1896f8c3b09.gif)
![cursor_help.gif](/files/attach/images/19360727/992/365/019/f184766d94e09781905f762e699666a3.gif)
등이 있습니다.
'hand' 대신 원하는 모양으로 바꾸면 되겠지요??
종종 'crosshair'로 쓰시는 분들도 많더라구요.
댓글 16
제목 | 글쓴이 | 날짜 |
---|---|---|
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |