今回は６４回目です。
文字の上にカーソルを乗せると、カーソルの形が変わります。

カーソルの形を変える
今回の効果は、文字の上にカーソルを乗せるとカーソルの形が指定したものに変わるというものです。
カーソルの形が十字等の形になっているサイトを見かけることも結構あると思います。ちょっとした指定でカーソルの形を変えることができるので、ちょっと遊びたい気分の時は使ってみるのもいいかもしれません。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント 触った時にカーソルの形を変えたい部分を＜ＳＰＡＮ＞タグで囲みます。
＜ＳＰＡＮ＞タグの中の ＳＴＹＬＥ＝ の次に形の指定を書きます。例えば十字にしたい場合は ｃｕｒｓｏｒ：ｃｒｏｓｓｈａｉｒ となります。
効果 効果 ＜ＳＰＡＮ＞タグで囲んだ文字の上にカーソルを乗せると、ＳＴＹＬＥ＝ で指定した形にカーソルが変わります。
使い方 使い方 実際の実験画面のソースをご覧下さい。

今回の実験でわかったこと

この効果はＩＥの６.０と、ネットスケープの７.０で確認しています。
Ｍａｃは確認していません。

ＮＮでは、一番上の「手の形」になりませんでした。
リンク部分にこの効果を使いたい場合は、文字を直接＜ＳＰＡＮ＞タグで囲むのではなく、＜ＨＥＡＤ＞タグの間にリンク部分の指定を書いてそこでカーソルの形を指定します。上から４番目の「上下左右の矢印」だけリンクをつけてみました。
この部分は＜ＳＰＡＮ＞タグで囲まないで、＜ＨＥＡＤ＞と＜／ＨＥＡＤ＞の間の
＜ｓｔｙｌｅ ｍｅｄｉａ＝”ｓｃｒｅｅｎ” ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ＞
のところで指定してあります。
リンク部分の場合、直接文字を＜ＳＰＡＮ＞タグで囲むと、カーソルを乗せた時は確かに指定した形になりますが、クリックすると指の形に変わってしまいました。なのでリンク部分の場合は＜ｓｔｙｌｅ ｍｅｄｉａ＝”ｓｃｒｅｅｎ” ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ＞で指定した方が良さそうです。


ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
超簡単ＨＰ実験室 実験室のトップページに