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

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。