一定時間で画像を交換することにより、狭い場所にたくさんの情報をのせることができ、人目を引くこともできます。交換する画像をうまく作ればアニメーションにすることもできます。
ウェブページ上のアニメーションはいままでアニメーションgifが一般的でしたが、最近はflashが使われるようになってきています。広告を切り替えるような用途では、JavaScriptもよく使われます。
まず、例によって元の絵を body の中に img タグで貼り付けます。そこにはやはり、id="area1" と名前を付けます。この名前は任意ですがページ内で同じ名前があってはいけません。
<img src="images/img1.png" alt="" id="area1" />
この画像を次々に換えるために anime() という関数を SCRIPT タグの中で次のように定義します。
<script type="text/javascript"> var n=3; function anime(){ if ( n==1 ) { document.getElementById("area1").src = "images/img2.png"; n=2; }else if ( n==2 ) { document.getElementById("area1").src = "images/img3.png"; n=3; }else if ( n==3 ) { document.getElementById("area1").src = "images/img1.png"; n=1; } setTimeout("anime()",1000) } </script>
まず考え方をおおざっぱにつかんでください。現在の画像の番号を変数 n に記憶させ、n が1だったら2に換え、n が2だったら3に換え、n が3だったら1に換えるということを繰り返しているだけです。
この繰り返しをさせているのは、「自動的に移動」でもでてきた setTimeout() 関数です。ここでは1秒たったら anime() という関数を実行するという命令になっています。1000というのが1秒のことです。
anime() の中で anime() を呼び出すということで永遠に繰り返すことになっているわけです。
画像が大きいときは参考資料の「スムーズに動かす」に従って画像を前もって取り寄せ(プリロード)した方がスムーズにいきます。しかし、このままでも3つの画像が読み込まれるまでは乱れますが、その後は問題ありません。
永遠に自己を呼び出し続ける anime() ですが、最初に一回呼び出さなければ始まりません。これも「62.自動的に移動」でも使いましたが、<BODY>タグ内に onload の記述をしておくとページが表示されると同時にアニメーションが始まります。
<body onload="anime()">
if や else if は次の( )内の条件によって次の{ }内の命令を実行するかしないかを決定するものです。
if ( a ){ A } else if ( b ){ B } else if ( c ){ C }
は、a という条件では A を実行し、b という条件では B を実行し、、c という条件では C を実行するということになります。
abcやABCの内容は長くなるので、条件と実行内容の対応がわかりやすいように、次のような配置で書く習慣になっています。
if ( aであるか ) { aが成立したときに実行する内容。 }else if ( bであるか ) { bが成立したときに実行する内容。 }else if ( cであるか ) { cが成立したときに実行する内容。 }
「{ 」や「 }」がとんでもないところにありますが、書き忘れないように。
さて、次は条件ですが、ここでは n が1であるか2であるか3であるかという3つの状態があり得ます。「nが1であるか」という条件は( n == 1 )と書きます。「=」を2つ書くのは1かどうか調べるだけで、nに1を代入しないのだから、書き方も区別しようということでこのように決められています。
n==1 が成立すれば、次の2つの命令が実行されます。
document.getElementById("area1").src = "images/img2.png"; n=2;
画像の src を img2.png にして、nに2を代入します。今表示されている画像が2番目のものだと覚えておくわけです。nが2になりましたが、次の ( n == 2 )で実行される命令はやりません。次は一連の if ~ else if の次の setTimeout の命令に移ります。
この命令は「 anime() を 1000 ミリ秒(=1秒)待ってから実行せよ」という意味になります。
setTimeout("anime()",1000)
1000ミリ秒後にanime()が呼ばれたときは n の値は2なので、今度は2つめの部分が実行されます。
document.getElementById("area1").src = "images/img3.png"; n=3;
このようにして繰り返していくことになります。
一定時間で画像を交換するページをつくりなさい。とりあえずclick.htmlで使用した画像を使ってもよいが、うまくいったら、自分の画像と入れ替えること。画像の大きさは任意でよいが、同じ大きさのほうがよい。
最終的には必ず自作の画像にすること。
index.htmlからは「マウス」という名前のリンクから行けるようにすること。