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

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

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

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

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

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

◆ 実行サンプル

【　解　　　　説　】

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

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

と記述します。

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

画像を変更する記述方法は、いくつかあります。
document.（画像名）.src="（変更する画像のファイル名）"; document.images['（画像名）'].src="（変更する画像のファイル名）"; などです。

最初の画像が「gazou1.gif」で変更後の画像を「gazou2.gif」、その画像の名前が「image1」とした場合、画像にマウスが乗った時のJavascriptは次のいずれかで記述します。 document.image1.src = "gazou1.gif"; document.images['image1'].src = "gazou1.gif";

また、マウスが画像から離れた時のJavascriptは次のいずれかで記述します。 document.image1.src = "gazou2.gif"; document.images['image1'].src = "gazou2.gif";

【記述サンプル】

画像のname属性、画像のファイル名、ともにJavascript内で指定する場合。

まず、テキストエディタなどを使用し、次の記述を「mgraph1.js」というファイル名で保存します。
※このサンプルは、画像タグに「name="image1"」と記述している場合です。
function img_over(){ document.image1.src = "menut0d_02.png"; } function img_out(){ document.image1.src = "menut0_02.png"; }

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

オンマウスで画像を変更したい画像のタグはを次のように記述しています。
<img src="menut0_02.png" alt="トップ" width="40" height="16" onmouseover="img_over();" onmouseout="img_out();" name="image1">

【記述サンプル】

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

まず、テキストエディタなどを使用し、次の記述を「mgraph1.js」というファイル名で保存します。
function img_over(imgnam0,gnam0){ document.images[imgnam0].src = "../../images/top/menut0d_0"+gnam0+".png"; } function img_out(imgnam0,gnam0){ document.images[imgnam0].src = "../../images/top/menut0_0"+gnam0+".png"; }

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

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

【記述サンプル】

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

まず、テキストエディタなどを使用し、次の記述を「mgraph1.js」というファイル名で保存します。
function img_over(obj0,gnam0){ obj0.src = "../../images/top/menut0d_0"+gnam0+".png"; } function img_out(obj0,gnam0){ obj0.src = "../../images/top/menut0_0"+gnam0+".png"; }

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

オンマウスで画像を変更したい画像のタグはを次のように記述しています。 <img src="../../images/top/menut0_04.png" alt="新着情報" width="59" height="16" onmouseover="img_over(this,'4');" onmouseout="img_out(this,'4');" name="image3">