ＨＰ作成講座、脱初心者編
画像を入れ替える。その２
勝手に入れ替わる画像
今回は、読み込むたびに違う画像を表示する方法です。
この画像はこのページを読み込むたびに変わります。
それと、今度は勝手に画像が次々と入れ替わります。
では、早速このソースです。
<head>

<script language="JavaScript">
<!--

var i;
var img = new Array(2);
for (i=0;i<3;i++){
img[i]= new Image(); //画像の先読み込み（参照）
img[i].src = "pic/buton"+i+".png";
}

//読み込むたびに画像が変わる関数
function rload() {
var gn;
gn=Math.floor(Math.random()*3); //gnは０〜２までのランダムな数。
document.gazou1.src = "pic/buton"+gn+".png";
}

//勝手に画像が変わる関数
var k=0;
function anime() {
var gn;
gn=k%3; //gnはkを３で割ったあまり。０〜２になる。
document.gazou2.src = "pic/buton"+gn+".png";
k++
timerID=setTimeout("anime()",600);
}

//-->
</script>

</head>

<body onLoad="rload();anime();">

この画像はこのページを読み込むたびに変わります。<br>
<center>
<img src="pic/blankicon.gif" name="gazou1" width="207" height="104" border="0">
</center>
それと、今度は勝手に画像が次々と入れ替わります。
<center>
<img src="pic/blankicon.gif" name="gazou2" width="207" height="104" border="0">
</center>

</body>
さて、ｂｏｄｙタグから見ていきましょう。
<body onLoad="rload();anime();">のonLoadは、イベントハンドラです。
このページが読み込まれたら、関数rload()と関数anime()を実行するということです。
そして、<body>〜</body>の中には２つのｉｍｇタグがあります。
それぞれにnameで、名前を付けています。gazou1とgazou2
この名前はＪＡＶＡスクリプトで使います。
ｉｍｇタグには、とりあえず最初に表示する画像のアドレスを指定しておきます。
今回の場合は、全部透明の画像を使いました。何も書かれていない透明の画像ですから、表示されても全くわかりませんが・・。
◆
そして、ＪＡＶＡスクリプト。
まず、読み込むたびに画像が変わる関数です。
function rload() {
var gn;
gn=Math.floor(Math.random()*3); //gnは０〜２までのランダムな数。
document.gazou1.src = "pic/buton"+gn+".png";
}
今回も基本的には、document.ｉｍｇタグのname.src = "画像のアドレス"で、指定した画像が表示されます。
表示する画像は今回は３種類です。
picフォルダにある、buton0.png と buton1.png と buton2.png です。
このような画像のファイル名にしておくと、ファイル名の数字の部分を切り替えるだけで画像を切り替えられますね。
document.gazou1.src = "pic/buton0.png";
document.gazou1.src = "pic/buton1.png";
document.gazou1.src = "pic/buton2.png";
 そして、この数字の部分を変数を使って書くと・・
document.gazou1.src = "pic/buton"+gn+".png";（gnが変数）
”画像のアドレスの途中まで”＋数字の部分（変数）＋”その残り”というふうになっています。
ＪＡＶＡスクリプトではこのように、文字を足し算の様に分けて書くことが出来ます。
その足し算の最初が文字ならば、途中で数字が混じっていてもＯＫ！
そして、読み込むたびに、この変数gnを０、１、２のどれかに切り替えればいいのです。
それが、次のこれです。
gn=Math.floor(Math.random()*3);
これについてはこちらを参照。
この関数が実行されるたびに、gnは０〜２の整数のどれかになります。
それで、読み込むたびにgnが０だったり１だったり２だったりして、gazou1と名付けたｉｍｇタグで表示する画像のアドレスが変わります。
◆
そして、次は勝手に切り替わる関数です。
var k=0; //kは最初は０。
function anime() {
var gn;
gn=k%3; //gnはkを３で割ったあまり。０〜２になる。
document.gazou2.src = "pic/buton"+gn+".png";
k++ //kに１を足す。
timerID=setTimeout("anime()",600);
//１０００分の６００秒後にまたこの関数を繰り返す。
}
document.gazou2.src = "pic/buton"+gn+".png";は、さっきと同じ方法で、gazou2と名付けられたｉｍｇタグの画像を切り替えます。
関数が繰り返し実行されるたびに、kは１ずつ増えていきます。
gn=k%3;では、そのkを３で割ったときの余りを、gnに入れます。参照
そうすると、gnは０→１→２→０→１→２→０→１→・・・・・と、繰り返されるたびに変わっていきます。
そうすると、画像は、buton0.png→buton1.png→buton2.png→・・・と入れ替わります。
ＰＣ−Ｐａｒｋトップ
心の話サイコロＴｏｗｎ！




広告 [PR] 花　再就職支援 冷え対策　わけあり商品 無料レンタルサーバー