(補足)
カーソルの形状で、「自動」と言うのは、カーソルの形状を指定しないのと同じです。
応用編のように、他のタグと、組み合わせて使ってみてね。
(注1)段落とは、表示されている文字の行全部(文字の横の空白部分を含む)と言う意味です。
また、「div」を「p」に変えることも出来ます。(違いは、1.文字(サイズ・色・・・)を見てね)
(注2)bodyタグについて良く解らない人は、ページを全体を構成するタグ を見てね。
(注3)カーソルの画像は、アイコンやカーソルを作るソフト(僕は、「ANIめーかー」と言う、フリーソフトを使いました)で作ってくださいね。ちなみに、Windows標準添付ソフト「ペイント」では、出来ません。
また、保存する時は、アニメーション(動画)なら、「.ani」で、普通の画像(静止画)なら、「.cur」を最後に付けて保存して下さいね。それから、画像の取り扱いと同じように、ご自分のHPにアップロードして下さいね。
(保存の名前の例)動画 abc.ani 静止画 abc.cur
(カーソルのURL名の例) 動画 http://pega.littlestar.jp/tagunooheya/abc.ani
静止画 http://pega.littlestar.jp/tagunooheya/abc.cur
P.S 上記のアドレスはサンプルのため、このアドレスを入れても、何も表示されません。また、ここのカーソル(線より上の文字の部分)は、アニメーション(動画)ですね。
また、どうしても、今すぐに試したいと言う方は、サンプルアドレスを使って表示してみて下さいね。
ただ、ずっと使うのは、やめて下さい。(画像の直リンクと同じ行為になりますので・・)
また、このサンプルが欲しいという方は、サンプルアドレスをアドレスバーに直入力すると、ダウンロードして、PCに保存出来ますので、ご自分で保存したのをHPにアップロードして使う場合は、O.Kです。
サンプルアドレス:http://page.freett.com/tagunooheya/image/sample/hosi2.ani
(表示タグの例:文字にカーソルが乗ると編)
<font style="cursor:url('http://page.freett.com/tagunooheya/image/sample/hosi2.ani')">文字</font>
赤い文字の部分を変更してコピー貼り付けで使ってね! | |
---|---|
文字の段落にカーソルが入ったらカーソルの形状を変える(注1) | <div style="cursor:カーソルの形状">文字</div> |
文字の段落にカーソルが入ったらカーソルを画像に変える(注1.3) | <div style="cursor:url('カーソルのURL')">文字</div> |
文字にカーソルが乗ったらカーソルの形状を変える | <font style="cursor:カーソルの形状">文字</font> |
文字にカーソルが乗ったらカーソルを画像に変える(注3) | <font style="cursor:url('カーソルのURL')">文字</font> |
ページ全体のカーソルを変える(注2) | <body style="cursor:カーソルの形状"> |
ページ全体のカーソルを画像に変える(注2.3) | <body style="cursor:url('カーソルのURL')"> |
応用編 | <他のタグ style="cursor:カーソルの形状">文字など</他のタグ> |
応用編(画像)(注3) | <他のタグ style="cursor:url('カーソルのURL')">文字など</他のタグ> |
応用例(リンク編) | <a href="URL" style="cursor:カーソルの形状">文字</a> |
応用例(リンクの画像編)(注3) | <a href="URL" style="cursor:url('カーソルのURL')">文字</a> |
応用例(ボタン編) | <input type="button" value="ボタンの文字" style="cursor:カーソルの形状"> |
応用例(ボタンの画像編)(注3) | <input type="button" value="ボタンの文字" style="cursor:url('カーソルのURL')"> |
カーソルの形状の表 (★★にカーソルを乗せて形を確認してみてね) | |||||||
---|---|---|---|---|---|---|---|
形状 | タグ | 形状 | タグ | 形状 | タグ | 形状 | タグ |
自動 | auto | ★★ | crosshair | ★★ | default | ★★ | pointer |
★★ | move | ★★ | text | ★★ | wait | ★★ | help |
★★ | n-resize | ★★ | s-resize | ★★ | w-resize | ★★ | e-resize |
★★ | ne-resize | ★★ | nw-resize | ★★ | se-resize | ★★ | sw-resize |