■ オンマウスで文字色、背景色の変更

Javascriptでスタイル属性を変更してリンク文字の色を変更します。

マウスが重なると文字の文字色と背景色が変更されます。
HTMLのスタイルシートでも同様の事が可能です。

今回は、Javascriptの記述を簡素化するため、変更したいタグ自身と状態スイッチの両方をパラメータで与えます。
この場合、タグ自身をJavascriptに与えるので、name属性は必要ありません。
この方法ならHTMLもJavascriptもかなり簡略できます。

「マウスが乗ったら．．」と言うのを専門の言葉（Javascriptなど）で「オンマウス」、あるいは「マウスオーバー」と言います。
また、 「マウスが離れたら．．」と言うのを同じく、「マウスアウト」と言います。

同じような処理はDHTMLでも可能ですし、スタイルシートでも可能です。
Javascriptの場合はDHTMLと違い、ひとつひとつ細かな指定ができる点にメリットがあります。

DHTMLを使った同じような処理は「DHTML（DynamicHTML）サンプル」−「オンマウスで画像の変更」にあります。

◆ 実行サンプル

【　解　　　　説　】

まず、画像にマウスが乗った場合の処理は、
onmouseover="（javascriptの記述）"

マウスが画像から離れた場合の処理は、
onmouseout="（javascriptの記述）"

と記述します。

Javascriptでテキスト色や背景色を変更する場合は、そのタグに名前が必要になります。
名前の指定は「id」属性を使用し、次のように記述します。
id="（タグの名前）"

今回、Javascriptの処理名は「setcolor」とします。

この処理に変更したいタグのname属性、状態スイッチの両方をパラメータとして渡す場合は次のように記述します。
setcolor(this,'（状態スイッチ）'); ※「this」はそのタグ自身を渡す時使用します。

この処理で与えられたそれぞれのパラメータを「obj0」、「sw1」で、受ける場合は、次のように記述します。
setcolor(obj0,sw1)

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「mbgtxt.js」というファイル名で保存します。
function setcolor(obj0,sw1) { if (sw1 == 0) { fgc = ''; bgc = ''; } else { fgc = '#ff0000'; bgc = '#ccffcc'; } obj0.style.color = fgc; obj0.style.backgroundColor = bgc; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="mbgtxt.js"></script>

オンマウスで文字色、背景色を変更したい文字のタグはを次のように記述しています。
※このサンプルでは、spanタグを使用しました。
<span onmouseover="setcolor(this,1);" onmouseout="setcolor(this,0);">
ここにマウスを乗せて！！
</span>