今回は８２回目です。
リンク部分にマウスポインタを置くとその背景色が変わります。

マウスポインタを置くと背景色が変わる３
今回の効果は、リンク部分にマウスポインタを置くと、その背景の色が変わるというものです。
過去に２回、同じような効果を実験してみましたが、今回の実験は、ただ色が変わるのではなく、色が濃いグレーから白にフェードアウトします。
そんなに派手な効果ではありませんが、リンクにちょっとしたアクセントがつくのではないでしょうか。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント if(swt=='in') の「in」を「in」にするか「out」にするかで、黒から白へフェードするか白から黒へフェードするかを決めます。
left:150px は、リンク文字の画面左端からの位置の指定です。
padding:4pxは、リンクの色がつく部分からどのくらい下の位置にリンク文字を表示させるかの指定です。
width:200pxは、リンクの色がつく部分の幅の指定です。
height:25pxは、リンクの色がつく部分の高さの指定です。
実際のリンク文字部分に、リンクの飛び先と画面上からの位置の指定をします。
リンク項目を増やす場合は、＜div＞タグから＜/div＞までの一塊りをコピーして追加します。その際、id="a3、onmouseover=のところも'a3'というように、追加するごとに数字を増やしていくことを忘れないで下さい。
あと、上からの位置も style="top:210px" というように下にずらして下さい。
効果 効果 リンク部分にマウスで触ると、グレーから白、あるいは白からグレーに背景色が変わります。
使い方 使い方 実際の実験画面のソースをご覧下さい。

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

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

今回の実験は、ネットスケープでも動きました。
とにかく、指定する箇所以外は触らないでコピーしてみて下さい。

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