【ホームページ作成】リンク画像の背景色を一瞬で変更する方法

今回は、次のようなリンクを作成してみましょう！
画像の上にマウスを乗せてみて下さい。画像の色が変化します。
これは、スタイルシートだけで実現しています。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つの方法」などをご参照下さい。

【関連記事】

• スタイルシートで表を見やすく装飾！
• スタイルシートを使いにくくするクラス名
• スタイルシートでドロップキャップを作る
• 属性セレクタで、スタイルシートを柔軟に！
• スタイルシートを切り替えられる機能を作る