웹마스터 팁
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' 모양 말고 어떤 모양이 있는지 살펴보죠.
: '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'로 쓰시는 분들도 많더라구요.
댓글 16
-
Z
2003.09.24 17:51
-
impre
2003.09.20 19:38
중간에 그림들을 가지고 예를 들어보려고 했는데...그림주소만 올라와도 마우스커서가 바뀌고 링크가 되버리네요...ㅡ.ㅡ;;
부득이 그냥 텍스트로 적었습니다. -
TheMics
2003.09.20 20:20
"어느정도 만들어보신 분들"도 1번으로 하지 않을까 하네요;;;;;
보충: 그저 간단하게 style="cursor:hand"만 넣으면 됩니다..
또 그냥 링크보다는 자바스크립트 실행시 span택과 함께 쓰는 편이 유리합니다. 아시다시피 a 택을 이용해 자바스크립트를 실행시키면 현재 브라우저에서 "stop"을 누른 것과 같은 효과가 나오기 때문이죠. 때문에 span onclick을 쓰는데 커셔가 화살표로 나오므로 손모양으로 바꿔주기만 하면 됩니다. -
impre
2003.09.20 21:05
믹스님 보충 말씀 고맙습니다.
앞에 this.style 을 붙이는게 정석이라고 생각합니다. ^^ 기본기인거죠.
document.form.name.value 식에서 document를 쓰듯이 말이죠.
이런건 좋은 습관이라 생각해서 항상 붙여서 사용합니다. ^^
요즘엔 많은 분들이 1번 방식을 피하시죠. ^^
스타일로 지정한것들도 적용이 되니까요.
span onclick은 좋은 방법이라고 생각합니다. -
김도훈
2003.09.20 21:54
괜찮네요 ^^;
근데 홈페이지를 만들때 수많은 링크를 그런식으로 처리하기엔 저의 귀차니즘이 심하네요;; -
TheMics
2003.09.20 22:48
아...제말은 onmouseover가 필요없다는 말이였습니다;
<img onmouseover="style.cursor='hand'">로 이해하신 듯 한데; <img style="cursor:hand">라는 말이었어요 :) -
TheMics
2003.09.21 21:26
프레임.location.href가 아닐까요;ㅂ; -
플로렐라
2003.09.21 16:58
onclick="location.href='주소'" 정도만 적어도 되죠.
그런데 다른 프레임을 제어하려면 어떻게 해야되죠? -
impre
2003.09.22 00:17
onclick="location.href='주소'" 만 하시면 마우스 커서 안바뀝니다~
믹스님 빙고~ ^^ -
소룡이
2003.09.22 23:37
새창으로 띄우는거 말고 지금 쓰고 있는 창이 바뀌게 할수는 없나요??? -
impre
2003.09.23 18:57
onclick="location.href='주소'" 로 하시면 지금 창이 바뀌는걸로 됩니다.
믹스님 말씀대로 span으로 하던 그냥 링크를 거시던간에요..^^ -
앳플군
2003.11.27 16:41
NN에서는 hand -> pointer
이런건 IE의 압박이죠. 왠만한 브라우저는 모두다 pointer 으로 알고 있습니다. -
구지
2003.12.19 09:32
저도 믹스님 빙고~ -
토끼군
2004.01.26 10:28
onclick보다는 a/img nested를 선호하는 편(..) 자바스크립트 지원 안 되는 브라우저(lynx 같은)에서 볼 때는 짜증납니다... (뭐 그런 거 안 생각한다면 상관 없지만요;) -
エジ
2004.02.28 18:09
기본은 default~
딴프레임 이동//
<img src="어쩌고" border="0" onclick="window.open('주소','프레임이름','');" style="cursor:hand;">
window.open()을 이용하셔도 됩니다~ (퍽) -
보쌈하림♬
2005.01.19 22:53
오오오오오오오!!!!아주 좋은 팁이에요.≥ㅁ≤b
잘 쓸게요.ㅠ_ㅠ//
제목 | 글쓴이 | 날짜 |
---|---|---|
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] | CoolUnit | 2004.03.01 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] | PHASE | 2004.01.19 |
스크롤바 색상을 아름답게. [17] | 해리포터포에버 | 2003.12.16 |
마우스 커서에 대해서... [16] | impre | 2003.09.20 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] | PHASE | 2003.09.08 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] | 토끼군 | 2003.08.20 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] | @kihwa | 2003.07.11 |
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] | 쭘's | 2003.07.07 |
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] | 쭘's | 2003.06.16 |
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] | 쭘's | 2003.06.07 |
css3 안쪽과 바깥쪽 그림자 만들기 입니다 | 낮은자 | 2014.03.06 |
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] | 999 | 2011.01.11 |
노프레임 홈페이지 만들기 강좌 | H.N커뮤니티 | 2009.02.28 |
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) | H.N커뮤니티 | 2009.02.22 |
css 정리 파일(한글) [3] | 미곰탱 | 2009.01.22 |
스크립트 모음 [1] | *이종민* | 2008.11.29 |
계산기 [1] | *이종민* | 2008.11.29 |
바탕화면에 바로가기 만들기 | *이종민* | 2008.11.29 |
그러나 CSS로도 변경이 가능하죠. TheMics님이 말씀하신 style="cursor:hand"를 넣어도 됩니다.
혹은 cursor: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'
이런거 넣으시면 손가락이 많이 바뀐다는 것이지요.
location.href는 홈페이지의 URL을 변경해주고 새로고침을 해주는 것입니다.