■ ロールオーバー効果を表現するためのソース ■

今まではロールオーバーは、JavaScriptによる動作でしたが、CSS（スタイルシートを上手く使えば、JavaScriptを使わずにスムーズなロールオーバーが表現できます。

CSSには、:hover という、マウスカーソルをオーバー（乗せた）させた状態を示す疑似クラスがあります。通常これはリンクのaと併用されますが、このa:hoverの他の、a:link、a:visitedのそれぞれに異なる画像が表示されるようにしてあげればロールオーバーのそれと同様の表現ができるはずです。

しかし、CSSで設定できるのは背景画像としてなので、前景に何か配置してあげなければいけないので、ここでは透明GIF1*1ピクセルの画像を任意のサイズ（=背景画像のサイズ）にして、それにCSSで設定しています。それぞれのボタンにクラス指定しましたが、意味あいから考えるとID指定の方が適しているかもしれません。

上のサンプルのCSSソースは以下の通り。（urlは省略しています）

a:link .playstop, a:visited .playstop {
width: px; height: 39px;
background-image: url(offimage3.gif);
}
a:hover .playstop {
width: 68px; height: 39px;
background-image: url(onimage3.gif);
}

a:link .playback, a:visited .playback {
width: 65px; height: 39px;
background-image: url(offimage2.gif);
}
a:hover .playback {
width: 65px; height: 39px;
background-image: url(onimage2.gif);
}

a:link .playback2, a:visited .playback2 {
width: 63px; height: 39px;
background-image: url(offimage1.gif);
}
a:hover .playback2 {
width: 63px; height: 39px;
background-image: url(onimage1.gif);
}
これをリンクの数だけ書きます

HTMLは以下の通り

<table >
<tr>
<td><a href="1">
<img class="playback2" src="vault/trans.png" width="63" height="39" alt="" />
</a></td>
<td><a href="2">
<img class="playback" src="vault/trans.png" width="65" height="39" alt="" />
</a></td>
<td><a href="3">
<img class="playstop" src="vault/trans.png" width="68" height="39" alt="" />
</a></td>
途中省略.....
</tr>
</table>

a要素はインライン要素なので、ブロック要素にしてあげるために、display:blockを指定して、HTMLの方の透過GIFのサイズ指定をしない方法も考えられるかもしれません。

詳しく知りたい場合は、このページのソースをご覧下さい