■ オンマウスで行の背景色を変更する

背景色を変更する場合は、スタイル属性の「background-color」を使用します。
これを行単位で行う場合はdivタグを使用して、そのスタイル属性に適用します。

メニューなど複数行に適用したい場合、それらの設定を1行1行指定するとかなり無駄がありますから、Javascriptを使用して1箇所にまとめましょう。

このサンプルはDHTML（DynamicHTML）を使ってますから、「DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」なども参考にして下さい。

また、これぐらいの処理ならスタイルシートでも可能です。
「CSSサンプル（カスケーディングスタイルシート）」も参考にしてください。

◆ 実行サンプル

【　解　　　　説　】

まず、マウスが乗った時の処理はDHTML（DynamicHTML）サンプルで解説している通り「onmouseover=""」で、また、離れた時は「onmouseout=""」で処理します。
ひとつひとつを独立して記述すると無駄があるので、それらの処理はJavascriptに任せます。
今回は背景色を設定する「bc_set()」と背景色をクリアする「bc_clr()」というサブルーチン（処理）を作成します。

背景色に薄青を設定する場合、Javascriptでは次のように記述できます。 （対象オブジェクト）.style.backgroundColor = 0xbbccff; ※「style.backgroundColor = 0xbbccff;」とは、スタイル属性で「style="background-color: #bbccff;"」と指定することと同じです。

また、設定した背景色をクリアしたい場合、Javascriptでは次のように記述できます。 （対象オブジェクト）.style.backgroundColor = '';

サブルーチンに渡すパラメータは処理が単純なのでdivタグの情報すべてを渡すため「this」を使います。
したがって、オンマウスの処理は、次のように記述できます。
onmouseover="bc_set(this);"

また、マウスアウト（マウスが離れた時）は、次のように記述できます。
onmouseout="bc_clr(this);"

受ける方のJavascriptは、これを「obj0」という変数で受けるようにします。
したがって、背景色を設定するサブルーチンは、次のようになり、
function bc_set(obj0) { }

背景色を解除するサブルーチンは次のようになります。 function bc_clr(obj0) { }

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「bargraphj.js」というファイル名で保存します。

function bc_set(obj0) { obj0.style.backgroundColor = 0xbbccff; } function bc_clr(obj0) { obj0.style.backgroundColor = ''; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="divlineb.js"></script>

次にそれらのサブルーチン呼び出しを設定したメニューを次のように記述します。 <span style="color: white;background-color: fuchsia;"><em>【メニュー】</em></span><br>
<div onmouseover="bc_set(this);" onmouseout="bc_clr(this);"><a href="/">トップページへジャンプ</a></div>
<div onmouseover="bc_set(this);" onmouseout="bc_clr(this);"><a href="../smphtm/color.html">カラーサンプルへジャンプ</a></div>
<div onmouseover="bc_set(this);" onmouseout="bc_clr(this);"><a href="/images/exp/baloon.gif">画像を表示</a></div>
</div>