11.カーソルの形状を変える

(補足)
カーソルの形状で、「自動」と言うのは、カーソルの形状を指定しないのと同じです。
応用編のように、他のタグと、組み合わせて使ってみてね。
(注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



HTMLタグに戻る