マウスが来たら

マウスが乗ったら切り替える

●あらかじめ２つの画像を用意しておき、マウスが画像に乗ることにより画像が切り替わるようにします。

●用意した２つの画像です。大きさを同じにします。

図１	図２
redof.png	redon.png

●次の画像がマウスで切り替わります。

スクリプトの書き方

●まず、redof.png を普通に img タグで貼り付けます。そこにはやはり、name="area1" と名前を付けます。この名前は任意ですがページ内で同じ名前があってはいけません。

●次にonMouseOver="ageru()"とonMouseOut="sageru()"を書きます。onMouseOver はマウスが画像に重なったことを意味します。このときに「 = 」以下の関数（手続き）を実行しなさいという指示になっています。この ageru() という関数は redon.png を表示するというものです。onMouseOutは逆にマウスが画像からはずれたことを意味します。sageru()という関数で redof.png が表示されるようになっています。

<img src="images/redof.png" alt=""
 name="area1" onMouseOver="ageru()" onMouseOut="sageru()">

●ageru() や sageru() という関数は SCRIPT タグの中で次のように定義します。

<SCRIPT type="text/javascript">
<!--
function ageru(){
     document.area1.src = "images/redon.png";
}
function sageru(){
     document.area1.src = "images/redof.png";
}
//-->
</SCRIPT>

●document は表示部分を表します。ageru() はブラウザの表示部分の area1 という部分の src (ソース)を images フォルダ内の redon.png にしなさい。という意味になります。

●ボタンとターゲットとなる画像を別の物にすることができます。