2008年10月28日

cursorプロパティ マウスカーソル(ポインタ)の形状を指定

スポンサード リンク

cursorプロパティは、マウスカーソル(ポインタ)の形状を指定する時に使用します。
表示されるマウスカーソルの形状は OSやブラウザなど観る人の環境によって異なります。
各項目にマウスを乗せてください。 マウスカーソルの形が変わります。
  • default   通常のカーソル
  • wait      待ち状態(砂時計)
  • crosshair 十字
  • text      テキスト編集
  • pointer  ポインタ(指)
  • help     ヘルプ(?)
  • move      移動
  • e-resize  サイズ変更 右端
  • w-resize  サイズ変更 左端
  • n-resize  サイズ変更 上端
  • s-resize  サイズ変更 下端
  • ne-resize サイズ変更 右上隅
  • se-resize サイズ変更 右下隅
  • nw-resize サイズ変更 左上隅
  • sw-resize サイズ変更 左下隅
  • auto          ブラウザに依存
  • progress      進行中
  • no-drop       ドロップ禁止
  • all-scroll    全スクロール
  • col-resize    横方向 サイズ変更
  • row-resize    縦方向 サイズ変更
  • not-allowed   禁止カーソル
  • vertical-text 縦書きカーソル
  • url('hoge.cur'),text;自作のポインタ

サンプル

<html>
<head>
<title>cursorプロパティ</title>
<style type="text/css">
<!--
#wait { cursor: wait; }
#help { cursor: help; }
#org { cursor: url('hoge.cur'),text;}
-->
</style>

</head>
<body>
<p><span id = "wait">しばらくお待ちください。</span></p>
<p>解らないときは⇒<a href="#" id = "help">【ヘルプ】</a></p>
<p><span id = "org">オリジナルマウスカーソル(ポインタ)</span></p>
</body>
</html>

ブラウザでの表示例

しばらくお待ちください。

解らないときは⇒【ヘルプ】

オリジナルマウスカーソル(ポインタ)

オリジナルカーソルの指定の仕方
cursor: url('hoge.cur'), keyword;
hoge.cur の所に画像ファイルを入れます。
オリジナルのカーソルが利用できないない場合に備えて代替のカーソルを
 keyword の所に指定します。
auto text default pointer など。
サンプルでは text を指定しています。

オリジナルカーソルで使用可能なファイル形式を調べてみますと
【 オリジナルカーソルで使用可能なファイル形式は、
IE の場合は(.cur)と(.ani)で、Firefoxの場合は、GIFやJPEG、PNGなどです。】
となっていますが、試しに当ブログで使用しているファビコン(ファイル形式は .ico)を
cursor: url('hoge.cur'),text;に入れてみるとカーソルに表示されました。ので
そのまま掲載しました。

posted by javaScript at 17:42 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。