今回は、次のようなリンクを作成してみましょう！
画像の上にマウスを乗せてみて下さい。画像の色が変化します。
これは、スタイルシートだけで実現しています。JavaScriptなどは使っていないので、とっても手軽に実現できます。
 |
|
 |
※Internet Explorer 4.0 以降、Netscape Navigator 6.0 以降のバージョンが必要です。
スタイルシートでa要素（リンク）に「:hover」疑似クラスを使って装飾を指定すると、リンク文字の上にマウスカーソルが乗ったときに、リンク文字のデザインを動的に変更することが可能です。例えば、
a:hover { background-color: yellow; }
と記述しておけば、リンク文字の上にマウスカーソルが乗ったときに、リンク文字の背景色が黄色になります。
例えばこのような感じです。
↑
ここにマウスを乗せてみて下さい
※この効果は、Internet Explorer 4.0 以降、Netscape Navigator 6.0 以降のバージョンでないと実現されません。
さて、リンクは必ずしも文字（テキスト）であるとは限りませんね。画像を使っているページも 多くあります。 では、画像で同じことを実現するにはどうすればよいでしょうか？
JavaScriptを用いて、画像を入れ替える方法を採用しているページもよく見かけます。しかし、それではJavaScriptを書かなければならない上に、入れ替え用の画像も用意しなくてはなりません。
実は、とても簡単な方法で、リンク画像の背景色を変えることができます。この方法だと、画像を複数用意する必要もありません。
その方法とは...
画像の背景色を透過色にする
ということです。
背景を透過色にした画像の背景には、当然、画像の下にある色が表示されます。この色は、スタイルシートで「:hover」疑似クラスを使うことで変えることができます。ですから、透過色GIF画像をリンクにするだけで、テキストリンクの場合と同じ効果が得られるわけです。
実際に試してみると、次のようになります。
↑
ここにマウスを乗せてみて下さい
ただ、そのままだと、画像のデフォルトの背景色（マウスが画像の上に乗っていないときの背景色）が、ページの背景色と同色（上の例の場合は白色）になってしまいます。 デフォルトの背景色を望みの色にしたい場合もあるでしょうね。 その場合は、TABLEタグを同時に活用することで解決できます。
次のように、TABLEタグで画像を囲み、TABLE内の背景色を設定してやれば、それが画像の デフォルトの背景色になります。
■ソースコード
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD BGCOLOR="#ccffff"> <A HREF="～"><IMG SRC="xxx.gif" BORDER="0"></A> </TD></TR></TABLE>
紫色の部分は、適宜書き換えて下さい。
これを表示すると、次のようになります。
|
ここにマウスを乗せてみて下さい
こう記述すれば、望みの背景色を付けておくことができます。
これを応用して、背景色ではなく、文字色を透過色にしておくことで、文字色を動的に変化させる ことも可能ですね。 背景色と文字色を同時に変化させることはできませんが、JavaScriptを使わなくても良い分、 手軽に利用できるのではないでしょうか。
文字色を透過色にしてみた例：
↑
ここにマウスを乗せてみて下さい
手軽にできますので、ぜひ、試してみて下さい！
なお、スタイルシートの書き方については、記事「入門！スタイルシートを使う3つの方法」などをご参照下さい。
【関連記事】
