ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

リンク画像の背景色を一瞬で変更する方法

スタイルシートを用いて、リンク文字の上にマウスが乗ったときに、リンクの文字色を動的に変化させている方々も多いと思います。同じことを画像で行おうとしたとき、どうされるでしょうか? JavaScriptを使いますか?実は、画像自身に工夫をするだけで、テキストリンクと同様の効果を画像リンクにも出すことができるのです。今回は、その方法をご紹介いたしましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます