웹마스터 팁

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

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'로 쓰시는 분들도 많더라구요.
제목 글쓴이 날짜
[펌]유동아이피->고정아이피(포워딩 아님!!) [12] Plus가좋다 2004.06.08
IIS6.0+PHP4.3.3+MySql4.0.18+제로보드4.1 pl4 [10] 류진곤 2004.06.08
Apache 서비스를 위한 NT 보안 설정 [2] 토토루 2004.05.24
Apache 서버운영에 쓸모있는 팁 몇가지 [2] PCLab 2004.05.21
FTP서버설치 (filezilla server) [6] 이주성 2004.05.20
[경보]Serv-U 4.0 이전 버전 크래킹 툴 발견 [4] u2em 2004.04.26
개인서버로 메일 서버 및 기타 서버를 운영할 때 메일 및 서비스 절대 못 하게 하기...(xp이상) [3] 그냥이렇게。 2004.04.20
Apache 보안 [4] u2em 2004.04.05
초보자를 위한 Windows용 Apache2 + PHP + MySQL 설치 [7] PCLab 2004.03.29
경량화 리눅스 'Linux Annyung' [5] u2em 2004.03.27
Apache 자체 Log 관리 87K300 2004.03.20
-초보의 초보대상 강좌-커널 패치하기... [2] 87K300 2004.03.19
xampp 1.3 설치해 보기(winxp) [3] 이주성 2004.03.03
apache,php,mysql,zendoptimizer,phpmyadmin 다운 받기 [5] 이성헌 2004.02.28
Serv-U의 보안 설정 [1] 87K300 2004.02.24
Windows XP 에서 Apache 2 + PHP 5 + SQLite 설치하기 [8] 엔젤퀸 2004.02.23
[XAMPP]한 컴퓨터에서 여러 개의 홈페이지 운영하는 방법(가상호스트 아님) [8] The Darkness 2004.02.05
procmail로 마이둠 웜(MyDoom Worm) 필터링 좋은진호 2004.02.04
[초보강좌] 윈도우 서버의 용량 제한~~!! [17] file HoYa™ 2004.01.08
리눅스 서버 설치 및 관리에 따른 초보경험담을 게시판에 담아... [1] eversun 2004.01.05