トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

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

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

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

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

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

◆ 実行サンプル


略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、マウスが乗った時の処理は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>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom