マウスカーソルの変更
記述：2010年5月16日
通常は「矢印」マークになっているマウスカーソルを変更することが出来ます。
こちらはスタイルシート（CSS）で変更します。
マウスカーソルの変更は、ほとんどのブラウザに対応しています。
＊ブラウザのバージョンによっては対応していません。
ページ全体に適用する場合は、bodyタグとhtmlタグの両方に指定して下さい。
指定出来るマウスカーソルは、各一種類のみで複数同時に使うことは出来ません。
body,html {
cursor: 値;
}
自作（オリジナル）のマウスカーソルも指定出来ます。
拡張子は「cur（静止）」「ani（動画）」があります。
作り方については、グーグル先生に検索して貰って下さい。
＊この機能は「Internet Explorer（IE）」限定です。
値 |
枠内にマウスを移動させると形状が変わります。 |
crosshair |
|
pointer |
|
move |
|
text |
|
wait |
|
help |
|
url(ファイル名) |
下記のコードは、このページの一部を抜粋したものです。
外部のスタイルシート（CSS）ではなく、直接ページに書き込んでいます。
もちろん、外部のスタイルシート（CSS）から読み込む事も出来ます。
<html>
<head>
<title>マウスカーソルの変更</title>
<style type="text/css">
<!--
.cursor1 {
cursor: crosshair;
}
.cursor2 {
cursor: pointer;
}
.cursor3 {
cursor: move;
}
.cursor4 {
cursor: text;
}
.cursor5 {
cursor: wait;
}
.cursor6 {
cursor: help;
}
.cursor7 {
cursor: url(../img/star.cur);
}
-->
</style>
<body>
<table width="400" border="2" cellspacing="2">
<tr>
<td width="100">crosshair</td>
<td class="cursor1"> </td>
</tr>
<tr>
<td width="100">pointer</td>
<td class="cursor2"> </td>
</tr>
<tr>
<td width="100">move</td>
<td class="cursor3"> </td>
</tr>
<tr>
<td width="100">text</td>
<td class="cursor4"> </td>
</tr>
<tr>
<td width="100">wait</td>
<td class="cursor5"> </td>
</tr>
<tr>
<td width="100">help</td>
<td class="cursor6"> </td>
</tr>
<tr>
<td width="100">url(ファイル名)</td>
<td class="cursor7"> </td>
</tr>
</table>
</body>
</html>