今回は５５回目です。
画像が入れ替わります。

画像を触ると他の画像が入れ替わる
今回の効果は、ある画像をマウスで触ると、触った画像ではなく他のところにある画像が入れ替わるというものです。
今までの実験では、触った画像そのものを入れ替えるというものはやりましたが、今回は他のところにある画像が入れ替わります。
触った画像の説明等を表示させたりするのに便利です。憶えておくと色々使えると思います。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント 入れ替える画像を２個用意します。ファイル名は必ず連番にして下さい。ここでは「image1.gif」と「image2.gif」です。
OnMouse[i].src = "./testimage/image" + i + ".gif"; というのは、ある画像にマウスが触ったら、新しく「testimage」というフォルダの中の「image○.gif」という画像に入れ替える、という意味です。
「image○.gif」の○には数字が入ります。
次に、マウスで触る方の画像（ここでいうと妖精の画像です）に ＜ａ ｈｒｅｆ= というタグをつけ、そこの中で ｏｎＭｏｕｓｅＯｖｅｒ= という指定と、ｏｎＭｏｕｓｅＯｕｔ という指定をします。 ｏｎＭｏｕｓｅＯｖｅｒ= は「マウスが乗ったら」、ｏｎＭｏｕｓｅＯｕｔ は「マウスが離れたら」という意味です。
onMouseOver= の方の指定では（２，０）となっており、onMouseOut の方の指定では（１，０）となっています。
ここの「０」は、このページの中にある画像の「何番目に位置する画像を入れ替えるか」ということを表しています。この実験ページでは、画像は２個しかありません。ページ内の画像を数える時、左上から順に１個、２個と数えます。但し、１個目は「１」ではなく「０」です。ですので、１個目の画像（ここでは乳母車）は「０」の位置にある画像となります。
２個目の画像（ここでは妖精）は２個目なので、「１」の位置にある画像となります。

（２，０）の意味は、「マウスが乗ったら、０の位置にある画像を２番の画像（つまりimage2.gif）に入れ替える」で、（１，０）の意味は、「マウスが離れたら、０の位置にある画像を１番の画像（つまりimage1.gif）に入れ替える」です。
効果 効果 ＜ａ ｈｒｅｆ= というタグをつけた画像をマウスで触ると、「０」の位置にある１番の画像（image1.gif）が２番の画像（image2.gif）に入れ替わり、マウスを離すと１番の画像に戻ります。
使い方 使い方 実際の実験画面のソースをご覧下さい。

今回の実験でわかったこと

この効果はＩＥの４．０、ネットスケープのＶｅｒ３．０からできます。

ここでは、画像２個の入れ替えだけですが、ページ内でこの効果を複数使うこともできます。その場合は、入れ替え用の画像をimage1.gif、image2.gif、image3.gif、image4.gif、、、、と必要な分だけ用意して下さい。
それから、ｆｏｒ（i = 1; i < 3; i++） { の「３」の部分を用意した画像の番号よりひとつ大きい数字にします。今回は２個（image1.gif と image2.gif）なので「３」になっています。
あとは、（２，０）や（１，０）という指定のところの数字を間違えなければ大丈夫です。「どこの位置の画像を何番の画像に入れ替えたいのか」をきちんと指定して下さい。


ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
超簡単ＨＰ実験室 実験室のトップページに