トップ > Javascriptサンプル

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

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

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

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

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

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

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

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

◆ 実行サンプル

ここにマウスを乗せて!!
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、画像にマウスが乗った場合の処理は、
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>



page update:2010/01/23 20:32

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