今回は６９回目です。
画像を入れ替えずに、リンク画像の背景の色を変えます。

画像を入れ替えないでリンクの背景色を変える
今回の効果は、リンク画像にマウスカーソルを乗せると、背景の色が変わるというものです。
リンクの画像の色を変えるには、JavaScriptを使って２個の画像を入れ替える方法が多いですが、ここでは用意する画像は1個だけで済みます。
２０００年８月の「マウスポインタを置くと背景色が変わる」と似ていますが、２０００年の方はリンクを張っていません。また画像も使っていません。
JavaScriptを使わずに簡単にできるので手軽に使えるのではないでしょうか？
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント ＜ｈｅａｄ＞と＜ｈｅａｄ＞の間に、マウスを乗せた時の背景の色の指定、
a:hover{background-color: #006666}を書きます。
#006666 の部分を背景色にしたい色に変えて下さい。
リンク用の透過ＧＩＦ画像を１個用意してテーブルの中に入れます。テーブルの背景色の指定＜td bgcolor="#559999"＞で触る前の画像の背景色を指定します。
効果 効果 最初、リンク画像の背景はテーブルで指定した背景色が表示され、マウスで触ると a:hover で指定した背景色が表示されます。
使い方 使い方 実際の実験画面のソースをご覧下さい。

今回の実験でわかったこと

この効果はＩＥの６.０と、ネットスケープの７.０で確認しています。
Ｍａｃは確認していません。

リンク用の画像を２個用意する必要がないのでちょっと楽でしょうか？

ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
超簡単ＨＰ実験室 実験室のトップページに