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

さて、今回はメニューなどでよく使用されている、オンマウスで画像の変更です。

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

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

同じような処理はJavascriptでも可能ですが、これぐらいのことならDHTMLで直接書いた方がシンプルです。
ただ、同じような処理や似たような処理を繰り返す場合は、共通処理部をJavascriptで記述し、呼び出しに変更部分を記述した方が全体の行数や文字数が少なくなりますので、要所要所に応じてその方法を吟味した方がいいでしょう。

Javascriptを使った同じような処理は「Javascriptサンプル」−「オンマウスで画像変更1」と「オンマウスで画像変更2」にもあります。

◆ 実行サンプル

【　解　　　　説　】

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

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

と記述します。

上記の内容をその画像のタグに記述する場合、その画像の変更は簡略して次のように記述できます。
this.src='（変更する画像のファイル名）';

この時の指定方法は、一般的な画像の指定方法と同じです。

したがって、画像にマウスが乗った場合の記述は、
onmouseover="this.src='（変更する画像のファイル名）';"

マウスが画像から離れた場合の処理は、
onmouseout="this.src='（変更する画像のファイル名）';"

となります。

これらを画像の表示タグ「img」に追記してやればいいのです。

【記述サンプル】

最初の画像が「gazou1.gif」で変更後の画像を「gazou2.gif」とした場合、次のように記述します。
<img src="gazou1.gif" onmouseover="this.src='gazou2.gif';" onmouseout="this.src='gazou1.gif';">

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。