コンテンツ
マウスカーソルを変えることはあなたのWebページに特殊効果を加える簡単な方法です。これは、特にゲームやインタラクティブマップのようなより複雑なページで、追加の視覚補助をユーザに提供することによってユーザビリティを向上させることができます。 Javascriptを使用して、日付、天気、その他に応じてカーソルスタイルを変更できます。動的Webページを作成するためにJavascript、HTML、およびCSSを使用する技法は、DHTML（Dynamic HTML）として知られています。
基本的なマウスカーソル
要素のスタイルやページの本文を変更することで使用できる標準のマウスカーソルがいくつかあります。名前は、default、crosshair、hand、move、text、wait、およびhelpです。詳細については、「参考文献」セクションの「CSS Cursor Property」リンクを参照してください。 CSSを使用して、要素を渡すときに表示されるカーソルを次のように定義します。
十字線
カスタムマウスカーソル
基本的なカーソルに加えて、次の例のように、イメージファイルのアドレスをカーソルスタイルとして設定することでカスタムテンプレートを使用できます。
カスタムカーソル
すべてのブラウザがこの機能またはすべてのファイルタイプをサポートしているわけではありません。たとえば、Internet Explorerは「.cur」または「.ani」という拡張子のファイルを想定しています。 Firefoxはアニメーションカーソル（ ".ani"）を受け付けず、画像の外側に基本的なカーソルがあることを想定しています。最良の結果を得るには、バックアップとしてカーソルファイル（ ".cur"または ".ani"）、画像ファイル（PNG、JPEG、またはGIF）、および基本的なカーソルタイプを指定します。次の例では、最初の選択肢としてアニメーションカーソル、2番目の場所に単純ファイル、最後のオプションとして基本カーソルを使用します。使用可能なオプションが見つかるまで、ブラウザはすべてのオプションを試します。
カスタムカーソル
参考文献のセクションのOpen Cursor Libraryには、無料のマウスカーソルのコレクションがあります。
インラインJavaScriptでカーソルスタイルを変更する
Javascriptを使用してカーソルのCSSスタイルを変更できます。ページ要素上をクリック、移動、またはホバーすることによってコードを実行するために使用できるマウスアクションに関連するHTML属性がいくつかあります。例をいくつか示します。
onmouseover：マウスポインタが要素の上を通過します。 onmousedown：マウスボタンが押されました。 onmouseup：マウスボタンを離します。 onmouseout：マウスポインタは要素から出ます。 ondblclick：ユーザーがマウスをダブルクリックします。
「属性」セクションの「属性」セクションには、Javascriptでアクションを追加するために使用できるその他の属性があります。
実行したいコードを属性の値として設定することによって、イベントにアクションを追加します（たとえば、 "mouseover"）。以下の例では、リンクの上にマウスを移動するとカーソルが "help"に変わります。
ヘルプ
機能で遊ぶ
場合によっては、複数の属性で許可されていることが必要になります。すべてのアクションをJavascript関数に記述することで、HTML文書の先頭にすべてのコードを配置し、event属性を呼び出してそれを任意の要素に適用できます。次のコードは、パラメータ "el"として渡された要素上のカーソルを変更します。
関数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"; GOの場合は "禁止"を解除します。document.body.style.cursor = "url（unavailable.ani）、url（unavailable.png）、default"; GOの大文字と小文字を区別する "default"：デフォルト：document.body.style.cursor = "url（arrow.cur）、デフォルト" GO}}
これを使用するには、HTMLタグ内のイベント属性から "loading"、 "禁止"、または "デフォルト"と呼びます。たとえば、次のボタンをクリックすると、カーソルが「読み込み中」に変わります。
Javascript言語には無制限の機能があります。以下のコードはカウントダウンし、毎秒マウスカーソルを現在の値に関連する画像に変更します。 "setTimeOut"関数は、呼び出されてカウンタを更新する前に、関数を1秒間中断したままにします。
function 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）、デフォルトは" GO}}
Webページ上で、フォーム上のボタンをクリックしたときにマウスカーソルにカウントを表示する機能を使用します。