スタイルシートを利用したロールオーバーの改訂版。
今、自分がいるポジションの所はちゃんと色が変わっているのがポイント。
マウスを乗せた時に画像を-30pxずらすようにしているのは前と同じ。
さらに、そのCSSの記述の下に、自分が見ているページのボタンのみに別のCSS(背景を-60pxずらす)を適用することにより、自分がいるポジションのところの画像の色を変えている。
DWのテンプレート機能を使って全てのページに同じソースを使っていても、head領域にCSSの記述をすればいいので、ワンソースでの管理も可能。
うまく説明できないので、詳しくはソースを参照。
背景に使用した画像は、↓こんな感じ。マウスを乗せた時に背景を30pxずらしてロールオーバーのような効果を持たせている。
ちなみに、CSSを適用してなかったら下みたいな感じ。