m015
マウスカーソルの形を変える
Copyright(C) 2004 web工房 All Rights Reserved
action
| 例1 |
この文字上に マウスカーソルを重ねて下さい |
通常の状態では文字上のマウスカーソルは｢I｣(テキスト)、文字の上以外は矢印です。これを文字上もすべて矢印に変更しました。 |
|
この文字上に マウスカーソルを重ねて下さい |
||
| 例2 | HELP | リンク文字は通常は｢手｣が表示されますが、ヘルプを表示したいのでマウスカーソルの形を変えました(例示では実際にリンクはしていません)。 |
| HELP | ||
| 例3 |
|
画像は通常は矢印ですが、ドラッグして移動できない、という意味を込めて、マウスカーソルの形をnot-allowedに変えてみました。 |
|
|
web技
◆手順【スタイルシート】
※<td〜><img〜><span〜>等にカーソルのスタイル属性を設定します
-----次の行から(copy)-----
style="cursor:not-allowed(要素名)"
-----上の行まで(copy)-----
◆下記に主たる要素名を列挙します。マウスカーソルを重ねると各要素のカーソル表示が確認できます。
auto /自動
crosshair
default /初期設定
pointer
hand /リンク
move
text /テキトス文字
wait
help /ヘルプ
all-scroll
no-drop
not-allowed
progress
vertical-text
col-resize /列幅変更
row-resize /行幅変更
(その他省略)
解説等
◆表示されるマウスカーソルの形はブラウザの種類・バージョッンやOSによって異なります。
◆表示されるカーソルを個別設定している場合はその設定通りに表示されます
◆自作カーソルも使用できますが省略します。あまり必要性を感じないんで...(^^;)ゞ
keyword
◇style◇cursor
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----