콘텐츠
마우스 커서를 변경하면 웹 페이지에 특수 효과를 추가하는 간단한 방법입니다. 이는 특히 게임 및 대화식지도와 같이 더 복잡한 페이지에서 사용자에게 시각 자료를 제공함으로써 유용성을 향상시킬 수 있습니다. Javascript를 사용하여 날짜, 날씨 및 기타 사항에 따라 커서 스타일을 변경할 수 있습니다. Javascript, HTML 및 CSS를 사용하여 동적 웹 페이지를 만드는 기술을 DHTML (Dynamic HTML)이라고합니다.
기본 마우스 커서
요소 또는 페이지 본문의 스타일을 수정하여 사용할 수있는 몇 가지 표준 마우스 커서가 있습니다. 이름은 기본값, 십자선, 손, 이동, 텍스트, 대기 및 도움말입니다. 자세한 내용은 "리소스"섹션의 "CSS 커서 속성"링크를 참조하십시오. CSS를 사용하여 다음과 같이 요소를 지나갈 때 표시 될 커서를 정의하십시오.
십자형 머리
사용자 정의 마우스 커서
기본 커서 외에도 다음 예제와 같이 이미지 파일의 주소를 커서 스타일로 설정하여 사용자 지정 템플릿을 사용할 수 있습니다.
맞춤 커서
모든 브라우저가이 기능 또는 모든 파일 형식을 지원하는 것은 아닙니다. 예를 들어 Internet Explorer는 확장명이 ".cur"또는 ".ani"인 파일을 필요로합니다. Firefox는 애니메이션 커서 ( ".ani")를 허용하지 않으며 기본 커서가 이미지를 벗어날 것으로 예상합니다. 최상의 결과를 얻으려면 커서 파일 ( ".cur"또는 ".ani"), 이미지 파일 (PNG, JPEG 또는 GIF) 및 기본 커서 유형을 백업으로 지정하십시오. 다음 예제에서는 애니메이션 커서를 첫 번째 선택 항목으로 사용하고 두 번째 간단한 파일을 사용하고 마지막 옵션으로 기본 커서를 사용합니다. 브라우저는 사용할 수있는 옵션을 찾을 때까지 모든 옵션을 시도합니다.
맞춤 커서
참고 자료 섹션의 Open Cursor Library는 무료 마우스 커서 모음을 제공한다.
인라인 자바 스크립트로 커서 스타일 변경하기
Javascript를 사용하여 커서의 CSS 스타일을 변경할 수 있습니다. 페이지 요소 위에서 클릭, 이동 또는 마우스 오버하여 코드를 실행하는 데 사용할 수있는 마우스 동작과 관련된 여러 가지 HTML 속성이 있습니다. 몇 가지 예는 다음과 같습니다.
onmouseover : 마우스 포인터가 요소 위에 전달됩니다. onmousedown : 마우스 버튼을 누릅니다. onmouseup : 마우스 버튼을 놓습니다. onmouseout : 마우스 포인터가 요소를 종료합니다. ondblclick : 사용자가 마우스를 두 번 클릭합니다.
"Attributes"섹션의 "Attributes"섹션에는 Javascript로 작업을 추가하는 데 사용할 수있는 더 많은 속성이 있습니다.
속성 값으로 실행할 코드를 설정하여 이벤트에 조치를 추가하십시오 (예 : "mouseover"). 아래 예에서 커서는 링크 위로 마우스를 가져 가면 "도움말"로 바뀝니다.
도움말
함수로 재생하기
때로는 둘 이상의 속성을 허용하려는 경우가 있습니다. Javascript 함수로 모든 액션을 작성하면 모든 코드를 HTML 문서의 맨 위에 놓고 이벤트 속성에서 호출하여 모든 요소에 적용 할 수 있습니다. 다음 코드는 매개 변수 "el"로 전달 된 요소에서 커서를 변경합니다.
function setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), 십자형 커서"GO}
함수는 문서 헤더의 스크립트 섹션 (태그 사이)에 있습니다.
및 ) 또는 동일한 부분에서 참조되는 외부 코드 파일에 저장됩니다. 이를 사용하려면 HTML 태그의 이벤트 속성에서 "this"키워드로 함수를 호출하십시오. 이 함수는 마우스 이벤트와 관련된 요소에 대한 참조를 받고 커서 스타일을 변경합니다. 예를 들어, 포인터가 다음 텍스트 위로 건너 뛰면 커서가 바뀝니다.이 링크에서 커서가 바뀝니다.
페이지 하단에 마우스를 가져갈 때 표시 될 기본 커서를 변경할 수도 있습니다. 다음 함수를 사용하면 "curtype"매개 변수에 표시된 유형으로 커서를 변경할 수 있습니다.
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; break GO case "forbidden": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), default"; GO case "default": default : document.body.style.cursor = "url (arrow.cur), default"GO}}
이를 사용하려면 HTML 태그의 이벤트 속성에서 "로드", "금지"또는 "기본값"이라고 부릅니다. 예를 들어, 다음 버튼을 클릭하면 커서가 "로드 중"으로 변경됩니다.
Javascript 언어는 무제한의 기능을 제공합니다. 아래의 코드는 카운트 다운되며 1 초마다 마우스 커서가 현재 값과 연결된 이미지로 변경됩니다. "setTimeOut"함수는 함수를 불러 와서 카운터를 업데이트하기 전에 함수를 1 초간 중단시킵니다.
함수 doCountdownCursor (count) {document.body.style.cursor = "url ("+ count + ".ani), url ("+ count + ".png) {setTimeout ( "doCountdownCursor ("+ count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), default"GO}}
웹 페이지에서이 함수를 사용하여 폼의 단추를 클릭 할 때 마우스 커서의 수를 표시합니다.