私はあまり使わないのですが、以前訊かれたことがあるので需要があるのかな、と思いまして。
値に触れるとその値が示す形にカーソルが変化します。
中にはブラウザにより対応していないものもあるのでご注意下さい。
| auto(初期値) | default(矢印) | pointer(ゆび) |
| crosshair(十字) | text(文字のヤツ) | e-resize(東。西と同様) |
| w-resize(西。東と同じ) | s-resize(南。北と以下略) | n-resize(北。みなry) |
| nw-resize(北西) | ne-resize(北東) | se-resize(南東) |
| sw-resize(南西) | move(動くよォ) | wait(ちょっと待っててね) |
| progress(考え中) | help(助けてぇ!) |
crosshairが人気あるようですね。
resizeシリーズの頭文字のアルファベットは東西南北(east,west,south,nouth)の頭文字っぽいです。
なんかeとw、sとnが同じなんだからどっちか片方作らなくて良かったんじゃないかなーなんて思うんですが。
間違ってたらこっそり教えてください←
以下のヤツはどうやらIE独自のものらしいです。私のOperaが表示しなかったので。
| hand(おてて) | col-resize(横移動) | pointer(縦詰め) |
| no-drop(動くな!) | all-scroll(どこでも行けるヨ) | not-allowed(進入禁止) |
handとpointerに違いあんのかな? どっちも指に見えるケド……どっかのブラウザでは違うんだろか。
私個人的にはカーソル変えはあまり好きではないんですが。
見辛いとかではなく、ただ単に好きじゃないだけです。嫌いでもないんですけれども。
私が作るテンプレはリンク装飾が多いため、デフォルトにしとけばリンクを見落とすことはあまりなくなると思うので難は少ないよなー、なんて。
ただ、ページごとにコロコロカーソルの形を変えるのはどうかなー……とは思います。
結局はリンクの時だけ形が変わるポイントを抑えて全体的に統一が図れてればどの形でもいいんですがね←
リンクだけ変更
リンク文字に触れるとカーソルが変わります。なにもしなけりゃ矢印から指にかわる指部分の変更です。
サンプル。触れるとmoveに変わりますよー
以下はスタイルシートでまとめて変更する方法。
以下はリンクタグに直接入れる方法。1ページの一部リンクにだけーってときに使えます。
ページ全体を変更
ページ全体のカーソルを変更します。なにもしなければ矢印のはずが……
サンプル。新窓でます
スタイルシートで統一するのが楽です。以下を<head>〜</head>の間に。
リンク以外に指定した部分にだけ適応する方法もあるんですが、特に用途無さそうなので。
需要がありましたら増やしますので教えてください。
時々、画像素材をマウスポインタにしているサイトをみかけませんか? アメブロとか特に。
大きすぎると少々うざったい感じが否めないのですが、それでも小さいねずみとか猫の足跡とか可愛いものもありますよね。
以下はその方法です。
まず、普通のアイコン素材では出来ません。拡張子がアニメーションカーソルファイル".ani"やカーソルファイル".cur"である画像である必要があります。
しかし、ブラウザがネスケ、Operaの場合は拡張子これらの拡張子を認識して無い場合があります。
また、画像は予めサーバーにupしておいた方が良さそうです。多分。
まずは試しにちょっと触れてみてください。この三行だけカーソルが星ステッキの画像に変わると思います。(Operaなどは認識してないかも。私のOperaはデフォルトのままだった……orz)
こんな画像だったら可愛くていいかも。大きすぎるのはちょっとね……^^;
以下はリンク箇所だけ変える方法。スタイルシートで指定。
以下はページ全体を変える方法。スタイルシートで指定。
最近は.ani, .cur, .ico 以外の拡張子以外にも、普通に.gifとかにも対応するブラウザもあるみたいです。これらがIE以外のブラウザに対応してくれるのかな? よくわからん。
どのブラウザにもきちんと表示させたいならば、種類が違うものを2つくらい画像を指定しておいたほうがいいかもしれません。最初に指定した画像が表示できなかった場合、2つ目の画像が繰り越されるみたいです。
ちなみに複数指定する場合は半角カンマで区切って並べてください。
何度か書きましたが、カーソル画像は大きいものはあまりお奨めできません。シンプルで軽いものが一番だと思います。
ちなみに星ステッキ画像は以下の素材サイト様からお借りしています! 可愛い素材屋さんです^^*