웹마스터 팁

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

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'로 쓰시는 분들도 많더라구요.
제목 글쓴이 날짜
ZipShin님 버튼 기능추가...누르면 링크가 됩니다...^^; [1] file 김희성 2003.01.05
[Tip]한글 97로 홈페이지 틀 짜기 [8] file Alunar 2002.09.21
으앗~~ 이거 엄청긴데 어느새월에 brbr 치구있어..=_;; 한번에 엔터효과주자! [15] file 깻잎사랑=_=v 2002.09.15
배경그림 고정하기 [5] file 티투 2002.08.28
노프레임 홈페이지 만들기 강좌:) [53] file Alunar@R. 2002.08.22
테이블에 마우스 커서 올리면 배경색 변하게 하기 [7] file Eccen 2002.08.17
그린 커뮤니티 강의 - 뉴스티커 만들기 [10] file 그린 2002.08.15
[BGM-초급]나모로 BGM 설치하기 (다운받기-시노부 포함) [5] file ▩윤미 2002.07.14
나왔다 드러갔다하는 메뉴.. [15] file Mr. JH 2002.05.17
저기에서 이리로 온 글입니다. [3] file 이성영 2002.05.07
드래그하면 바뀌는 마술거울효과 (-_-")v [16] file 짱나 2002.04.05
두 개의 프레임을 동시에 제어하기 [4] file (づ_-) 위드 2002.03.25
프레임 만들기 [6] file 냠냠 2002.03.10
특수문자 사용하기 file 란즈 2002.03.02
아주!!간단한 나갈때인사말띄우기-_- file 란즈 2002.03.02
▩폼 필드 예쁘게 꾸미는 법 [2] file ▩윤미 2002.03.02
페이지 스크롤 - 네개의 레이어를 이용한겁니다 [4] file choice 2002.02.25
오른쪽 스크롤바 에 출렁이며 내려오는 공지창 [3] file choice 2002.02.25
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05