マウスが来たら

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

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

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

図1 図2
redof.png redon.png

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

タグのイベント属性の書き方

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

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

<img src="images/redof.png" alt=""
 id="area1" onmouseover="ageru()" onmouseout="sageru()" />

スクリプトの書き方

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

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

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

こんなこともできます

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

      

課題 ファイル名 over.html

マウスが乗ることで画像を切り替えるページをつくりなさい。とりあえずclick.htmlで使用した画像を使ってもよいが、うまくいったら、自分の画像と入れ替えること。画像の大きさは任意でよいが、同じ大きさのほうがよい。

最終的には必ず自作の画像にすること。

index.htmlからは「マウス」という名前のリンクから行けるようにすること。

一般的なDOMを使って

htmlだけでなく上位のxmlに使えるやり方があります。一般のjavascriptよりもブラウザによる差が少ない方法です。しかし、一部IEでは使えない場合もあります。検証が十分でないので、参考までに掲載します。

bodyの中に書く部分は上記と同じです。

<img src="images/redof.png" alt=""
 id="area1" onmouseover="ageru()" onmouseout="sageru()" />

javascript部分は、クリックで切替で説明したものと同じです。タグの中の A=B という部分をアトリビュート(Attribute)といいます。imgタグの src="images/img1.png" もアトリビュートです。

Aの値をBにするためには、setAttribute("A","B") とします。

function ageru(){
     document.getElementById("area1").setAttribute("src","images/redon.png");
}
function sageru(){
     document.getElementById("area1").setAttribute("src","images/redof.png");
}

ウェブページ(Nov.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Dec.2008 改訂