cursor
cursorプロパティの役割
cursorプロパティは、マウスカーソル(ポインタ)の画像を指定します。
cursorプロパティに設定できる値
auto | ブラウザが自動的に選択。 | |
crosshair | 十字線。 | |
default | 初期値。Windowsならば矢印、Macintoshならポインターの形状。 | |
e-resize | 右辺リサイズ。 | |
help | ヘルプ。 | |
move | 移動可能。 | |
n-resize | 上辺リサイズ。 | |
ne-resize | 右上隅リサイズ。 | |
nw-resize | 左上隅リサイズ。 | |
pointer | リンクボタン用。 | |
progress | 砂時計。 | |
s-resize | 下辺リサイズ。 | |
se-resize | 右下隅リサイズ。 | |
sw-resize | 左下隅リサイズ。 | |
text | テキスト選択。 | |
w-resize | 左辺リサイズ。 | |
wait | 待機中。 | |
URLを指定 | 指定したURLにある画像をカーソルとして表示。 |
なお、URLを指定する場合には、
cursor: url(xxx.cur), default;
のように、カーソル画像ファイルへのパスと、それが表示できなかった場合のパラメータを上記リストから一つ選んでおきます。
cursorプロパティの使い方
cursor:url(../../../data/img/css/property/cursor-17.cur),default
この枠線内ではカーソルの画像が変わります。
上記のサンプルでは、[sample]の枠線内にマウスポインタがある間は、指定した画像(cursor-17.cur)に変わります。
カーソル画像の作り方
なお、カーソルに指定できる画像を作る場合には、.curというファイル形式で画像を作らなければ認識されません。
.cur形式の画像をつくるには、ANIメーカーというソフトが適しています。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-3