あらかじめ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 にしなさい。という意味になります。
ボタンとターゲットとなる画像を別の物にすることができます。
マウスが乗ることで画像を切り替えるページをつくりなさい。とりあえずclick.htmlで使用した画像を使ってもよいが、うまくいったら、自分の画像と入れ替えること。画像の大きさは任意でよいが、同じ大きさのほうがよい。
最終的には必ず自作の画像にすること。
index.htmlからは「マウス」という名前のリンクから行けるようにすること。
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"); }