cman.jpWEBページ作成
広告
カーソル形状の変更。マウスに画像を追従。
カーソルの変更は、カーソルそのものの形状を変更する方法と、カーソルは変更せずマウスの動きにあわせて画像を移動する方法があります。
広告
画像がマウスを追従するサンプル
マウスの位置をmousemoveイベントで取得し、その位置に追従させる画像を指定することで、画像がマウスを追従します。
『マウスの追従開始』ボタンを押下すると、画像がマウスを追従します。『マウスの追従終了』ボタンを押下すると、画像が消えます。
画像がマウスを追従するjavascript
カーソル形状を変更するサンプル
カーソルの形状の変更は、cursorスタイルに形式を指定するのみで可能です。
下記①②③の各欄にカーソルを合わせると、カーソルの形状が変化します。
当サンプルでは、javascriptでcursorへ設定を行っていますが、スタイルシートでの指定も可能です。
| ①オリジナル画像に変更 | ②リンク用アイコンに変更 | ③ヘルプ用アイコンに変更 |
|---|
カーソル形状を変更するjavascript
//①オリジナル画像に変更
document.getElementById("mouse_change1").style.cursor = 'url("https://web-designer.cman.jp/image/tmCmanjpIco.gif"),auto';
//②リンク用アイコンに変更
document.getElementById("mouse_change2").style.cursor = 'pointer';
//③ヘルプ用アイコンに変更
document.getElementById("mouse_change3").style.cursor = 'help';
document.getElementById("mouse_change1").style.cursor = 'url("https://web-designer.cman.jp/image/tmCmanjpIco.gif"),auto';
//②リンク用アイコンに変更
document.getElementById("mouse_change2").style.cursor = 'pointer';
//③ヘルプ用アイコンに変更
document.getElementById("mouse_change3").style.cursor = 'help';
ＣＵＲＳＯＲスタイル設定値一覧
カーソルの形状は、ブラウザによって異なる場合があります。
設定値にカーソルを合わせると、設定値のカーソルの形状に変化します。
| 設定値 | 意味 | 設定値 | 意味 |
|---|---|---|---|
| auto | ブラウザが自動で選択 | default | 通常のカーソル |
| none | カーソル非表示 | help | ヘルプ |
| pointer | リンク | cell | 選択 |
| wait | 処理中（操作不可） | progress | 処理中（操作可能） |
| crosshair | 十字 | move | 移動 |
| text | テキスト（横書） | vertical-text | テキスト（縦書） |
| n-resize | サイズ変更（上端） | e-resize | サイズ変更（右端） |
| s-resize | サイズ変更（下端） | w-resize | サイズ変更（左端） |
| ne-resize | サイズ変更（右上端） | se-resize | サイズ変更（右下端） |
| sw-resize | サイズ変更（左下端） | nw-resize | サイズ変更（左上端） |
| col-resize | サイズ変更（左下端） | row-resize | サイズ変更（縦方向） |
| not-allowed | 不可 | no-drop | ドロップ不可 |
| zoom-in | ズームイン | zoom-out | ズームアウト |
| all-scroll | 上下左右スクロール |
注意事項
- カーソル形状をオリジナル画像に変更する場合は、画像が表示できない時のために汎用カーソル（auto、default 等）も指定します。
| 関連するJavaScript |
|---|
| マウスによる線画 |
| 画像やDIVをマウスで好きな場所に移動 |
広告