マウスポインターの形を変える 


スタイルシートを使うとマウスポインターの形を変えることができます。
実施例
この部分にマウスカーソルを持ってくると時計の表示になります。
この部分では?マーク、 この部分では4方向の矢印マークとなります。

cursor:形状;

マウスが上に来た時にマウスカーソルの形状を変えたい部分を <SPAN STYLE="cursor:形状;">〜</SPAN>ではさみます。
リンク部に適用したい時は <A STYLE="cursor:形状;" href="***.htm">〜</A>のようにします。

形状には次のような指定ができます。ブラウザーのバージョンにより表示される形が異なります。
auto      crosshair      default       pointer      move      text       wait      help      n-resize       s-resize      w-resize      e-resize       ne-resize      nw-resize      se-resize       sw-resize

上の実施例は次のような表記になっています。
記入例-1
<SPAN STYLE="cursor:wait;">この部分にマウスカーソルを持ってくると時計の表示になります。</SPAN>
<SPAN STYLE="cursor:help;">この部分では?マーク、</SPAN> <SPAN STYLE="cursor:move;>"この部分では4方向の矢印マークとなります。</SPAN>

記入例-2
HEADタグの間に次の指定をします
<Style type="text/css">
<!--
.a1 {cursor:wait;}
.a2 {cursor:help;}
.a3 {cursor:move;}
-->
</STYLE>
そして本文を次のように書きます
<SPAN class="a1">この部分にマウスカーソルを持ってくると時計の表示になります。</SPAN>
<SPAN class="a2">この部分では?マーク、</SPAN> <SPAN class="a3">この部分では4方向の矢印マークとなります。</SPAN>


TOPページに戻る