今回は４８回目です。
マウスを文字の上に置くと、文字の背景部分に色がつきます。

マウスポインタを置くと背景色が変わる２
今回の効果は、２０００年８月の実験「マウスポインタを置くと背景色が変わる」の応用編です。
２０００年８月の実験では、文字は１行で、背景色も１色でしたが、今回の効果は、文字を数行書いて、かつ、その行ごとに背景色を変えて指定することができます。
よりカラフルで、目的別に色分けなどもできます。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント .Style1{ で、背景色を変える部分の文字の大きさを指定しています。
font-weight：bold; は、「太字にする」という指定です。
#iL1{ で、一行目の内容「先月の実験へ行きます。 」の指定をします。各行は「レイヤー」というものに分けてその内容を指定しています。
ここでは４行あるので、#iL1{ から #iL4{ まであります（ひとつのレイヤーに１行しか書けないというわけではありません。）
color: は、そのレイヤー（行）の（リンクしていない）文字の色の指定です。
top: は、そのレイヤーの画面上からの位置指定です。
left: は、そのレイヤーの画面左からの位置指定です。
width: は、背景色をつける範囲の幅の指定です。
height: は、背景色をつける範囲の高さの指定です。

＜ｂｏｄｙ＞タグ以下に、＜ＤＩＶ＞タグで、実際に表示する文字を書きます。
ID="iL1" で、どのレイヤーかを指定します。ここでは、レイヤーが４つあるので、 ID="iL1" から ID="iL4" まであります。
onMouseOver と onMouseOut の Mover(1) と Mout(1) の（）の中の数字も、１〜４まであります。
効果 効果 リンク項目の上にマウスを置くと、top: と left: で指定した位置に、width: と height: で指定した範囲にわたって、Col[n] = （nは１〜４）で指定した色が背景に表示されます。
使い方 使い方 実際の実験画面のソースをご覧下さい。

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

この効果はＩＥは４．０からネットスケープは、Ｖｅｒ４．０からできます。

今回の効果は、結構使えるのではないかと思います。
行（レイヤー）の数を変える場合は、その数に合わせて数字を変える必要が出てくるので注意して下さい。
var Laymax = 4; の「４」も変える必要があります。


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