マウスカーソルのスタイル

全てのタグ要素には、マウスカーソルの形を指定するスタイル属性があります。
この属性名は、cursorで、この初期の値（デフォルト値）が各要素に設定されています。
一般にブラウザで画像や文字でない所のcursor属性のデフォルト値は、 defaultで、

の形状です。
文字並びの上では、 textで、

の形状です。
ハイパーリンク部分の上にマウスを移動させると

から

の形状に変わります。

つまり、<a href="xxx">～</a>のaタグ要素のcursor属性に

の形状が設定されている訳です。この設定値は、pointerです。
このカーソルを通常のdefaultに変更する場合は、次のように cursorのスタイル属性を変更します。
<a href="xxx" style="cursor: default;">～</a>
しかし、このような変更は好ましくありません。「ここにリンクがある」ことを分かりやすくするための「マウスカーソルの変化」が通常と違ってしまうからです。本来は下の例で示すように、通常の動作と異なる設定をしている箇所を注目させる目的で使います。
以下にcursor属性に設定できる値の例を表で示します。表の各セル(th要素)に、表で示すcursor属性の設定値が施されています。下の表の上にマウスを移動して、カーソルを確認してください。
例→<th style="cursor: pointer;">pointer</th>

default	標準で使うカーソル	pointer	リンクがあることを示すカーソル
move	移動可能なことを示す	auto	ブラウザに任せる指定
crosshair	十字形状（ピクセル選択）	text	テキスト選択用
wait	時間がかかる表示	help	ヘルプ表示
n-resize	上方向にリサイズ可能	s-resize	下方向にリサイズ可能
w-resize	左方向にリサイズ可能	e-resize	右方向にリサイズ可能
nw-resize	左上方向にリサイズ可能	ne-resize;	右上方向にリサイズ可能
sw-resize	左下方向にリサイズ可能	se-resize	右下方向にリサイズ可能

なお、この部分にstyle="cursor: hand;"を指定していますが、Safari2.0のWebブラウザでは対応していないのでカーソルは変化しないでしょう。このようにWebブラウザに依存する設定値も多くあるようです。

イベントがある画像に、カーソルを設定する。

次は、スイッチで画像をクリックで、ONのスイッチの画像に変更する例です。
最初はimgタグ要素をpointerのカーソルにしています。
一度変更した画像は、元の画像に戻らないスクリプトになっているので、カーソルをスクリプトでdefaultに変更している所も注目してください。
document.off.style.cursor = "default";
また、次の記述で背景色を変更しています。
document.body.style.backgroundColor = "yellow";
いろいろ実験してみましょう。