スクリプト不使用で、お手軽ロールオーバーを作ろう！
今回は、「ページ作成実践講座」第2弾「リンク画像の背景色を一瞬で変更」でご紹介した ロールオーバーをちょっとだけ発展させた方法をご紹介いたします。
前回同様、JavaScript不使用＆別画像不要で実現できるテクニックです。
※「ロールオーバー」とは、画像の上にマウスが乗った際に、別の画像に差し替えることで何らかの視覚効果を出すテクニックです。 たいていはJavaScriptを用いて実現されます。
こんなのが作れます...
まずは、次の各リンク画像の上にマウスを乗せてみて、どうなるかを見てみてください。
 |
 |
 |
 |
 |
残念ながら、スタイルシートの「hover」疑似クラスを解釈できるブラウザ（Internet Explorer 4.0以降／Netscape Navigator 6.0以降など）でないと見えません。 その代わり、スクリプトは不使用で、交換用の別画像も不要なので、ずいぶん軽く表示できます。
どうなっているのか
前回同様、画像の背景色を透明色にするテクニックを使用しています。 今回は、画像の背景全体を透明色にするのではなく、背景の一部だけを透明色にしてあります。 ただそれだけのことです。
もうちょっと詳しく説明すると…
先ほどの例では、画像の背景色は「淡い緑（■）」1色のように見えますが、実際には次のようになっています。
| 背景は灰色
▲マウスを乗せてみてください。
|
画像の中心部（上記では灰色に見える部分）に透明色が使ってあります。
スタイルシートの「hover」疑似クラスを使ってで背景色を指定（後述）しておけば、画像にマウスを乗せた際に、背景色が透けて見える部分（つまり透明色で塗った部分）の色が変わるわけです。
冒頭の例では、TABLEタグを用いて画像をセル（枠）で囲み、セルの背景色を画像の背景色（透明色ではない部分の背景の色）と同じ色に合わせてありました。 そうすると、次のように見えるわけです。
| 背景は淡い緑色
▲マウスを乗せてみてください。
|
形は自由自在、表示は軽い。ただし1色のみ。
上記の例では、文字の後ろに楕円を浮かび上がらせているだけですが、 スタイルシートを使って「背景色を変化」させているだけですから、透明色で好きな形を描けば、どんな図形（絵）でも表示できます。
もっとも、文字そのものの変化など「元の形」が変わるような複雑なことは不可能ですが。 できることは、ある特定の1色を別の色に変化させることだけです。
しかし、その分、別の画像を用意する必要もなく、スクリプトを記述する必要もない、手軽に作れて表示も軽いロールオーバーになります。
具体的な記述方法・作成方法
それでは、具体的にどうすれば良いのか（画像の作成方法とHTMLの記述方法）をご紹介致しましょう。
