SYSTEM238 / NOTES1 / WEB / マウスカーソルの形を変える

NOTES1 PROG1
マウスカーソルの形を変える
JavaScriptやCSSでマウスカーソルの形を変える方法です。

概要

マウスカーソルの形状はブラウザが状況に応じて自動的に変更しています。その形状を、style.cursorプロパティに値を設定することにより変更できます。

webブラウザ経由で重い処理(PHPからPDFやExcelなどを作成するとか)を実行するとき、ブラウザがタイムアウトしないように処理状況(件数)をプログレス表示しますが、合わせてマウスカーソルを"wait"にできます。

JavaScript入力例

<script>
    document.body.style.cursor='default';
</script>

css入力例

<span style="cursor:wait;">wait</span>

入力可能値の一覧

各行に移動するとマウスカーソルが変化します。
「変更」ボタンを押した後はテーブル外に移動すると変更したマウスカーソルに変化します。

No.名称script
1 default デフォルト
2 auto 自動
3 wait 待ち状態(砂時計)
4 crosshair 十字
5 text テキスト編集
6 vertical-text 縦書きテキスト編集
7 pointer ポインタ(指)
8 help ヘルプ(?)
9 move 移動
10 progress 進行中
11 no-drop ドロップ禁止
12 not-allowed 禁止カーソル
13 e-resize サイズ変更:右端
14 w-resize サイズ変更:左端
15 n-resize サイズ変更:上端
16 s-resize サイズ変更:下端
17 ne-resize サイズ変更:右上隅
18 se-resize サイズ変更:右下隅
19 nw-resize サイズ変更:左上隅
20 sw-resize サイズ変更:左下隅
21 col-resize サイズ変更:横方向
22 row-resize サイズ変更:縦方向
23 all-scroll 全スクロール

*デフォルトのマウスカーソルは'default'ではなく、'auto'です。