１９９８年６月にやった「カーソルを置くと絵が変わる」の応用編です。
３つの画像を入れ替える
| 今回の効果は、９８年６月にやった「カーソルを置くと絵が変わる」を応用したものです。 ９８年６月にやったものは、カーソルを画像の上に置くと絵が入れ替わるというものでしたが、その時に使用した画像は２枚でした。今回は、画像を３枚用意して、カーソルを置くごとに次々と３枚を入れ替えていきます。 ２枚だけだと、カーソルを離すと最初に表示された画像に戻ってしまいますが、３枚だと順番に入れ替わっていくので、カーソルを置いた時に表示される画像と離した時に表示される画像が交互になります。 ２枚だけ使うよりもインパクトを与えることができかもしれません。 今月も少しだけこの実験にお付き合い下さい。 |
 ポイント | imag = new Array("a.gif", "b.gif", "734.gif");で、表示させる画像をあらかじめ指定しておきます。 画像のファイル名は連番にしておかなくても大丈夫です。 （今回は、ａ．ｇｉｆ、ｂ．ｇｉｆ、７３４．ｇｉｆにしてあります。） |
 効果 | onMouseOver="roundimg(test);" で function roundimg (imgname)を呼び出します。 [j % 3] で ｊ の値割る３（var j = 1;なので、最初は「１」）の余りを出し、ｊ に足します。最初は１＋１で２になります。そこで２番目の画像が表示されることになります。あとは、マウスを置いたり離したりする度に、この作業が繰り返されます。 |
 使い方 | 実際の実験画面のソースをご覧下さい。 |
今回の実験でわかったこと
| この効果は、Ｎｅｔｓｃａｐｅ３．０、Ｅｘｐｌｏｒｅｒの４．０からできます。 roundimg(test)の「ｔｅｓｔ」は imgname に該当するものです。画像に名前（ファイル名ではなく）をつけています。この名前は「これでなくてはいけない。」という決まったものがあるわけではないので、自分の好きな名前をつけることができます。 ここで使用する画像は、例によって高さと幅のサイズを全部同じにしておいた方がいいでしょう。 ３枚ができるなら、４枚も５枚もできると思います。（ここでは実験していませんが。） 興味がある方はぜひ試してみて下さい。 |
ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
