■ オンマウスで画像の変更2

メニューなどでよく使用されている、マウスによって画像を変更する処理です。

画像の上にマウスが乗ったら、その画像を別の指定した画像に変更します。
もちろん、マウスが画像から離れたら元の画像に戻します。

今回は、Javascriptの記述を簡素化するため、変更したい画像、入換える画像名の両方をパラメータで与えます。
この方法を取れば、HTMLの記述は少し煩雑にはなりますが、かなり自由度が高まります。

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

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

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

◆ 実行サンプル

【　解　　　　説　】

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

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

と記述します。

Javascriptで画像を変更する場合は、その画像に名前が必要になります。
名前の指定は「name」属性を使用し、次のように記述します。
name="（イメージタグの名前）"

今回、Javascriptの処理名を「image_change」とします。

この処理に画像のname属性、入換える画像のファイル名をパラメータとして渡す場合は次のように記述します。
img_change('（name属性）','（画像名）');

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

【記述サンプル】

画像のname属性、画像のファイル名、ともに呼び出し時に指定する場合。

まず、テキストエディタなどを使用し、次の記述を「mgraph2.js」というファイル名で保存します。
function image_change(imgnam0,gfnam0){ document.images[imgnam0].src = gfnam0; }

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

オンマウスで画像を変更したい画像のタグはを次のように記述しています。
※このサンプルは、画像タグに「name="image1"」、「name="image2"」と記述している場合です。
<img src="../../images/top/menut0_02.png" alt="トップ" width="40" height="16" onmouseover="image_change('image1','../../images/top/menut0d_02.png');" onmouseout="image_change('image1','../../images/top/menut0_02.png');" name="image1">
<img src="../../images/top/menut0_03.png" alt="新着情報" width="59" height="16" onmouseover="image_change('image2','../../images/top/menut0d_03.png');" onmouseout="image_change('image2','../../images/top/menut0_03.png');" name="image2">