ＪＡＶＡスクリプトを使うと、表示された画像を、マウスの操作で別の画像に入れ替えたり、読み込むたびに違う画像を表示したり、画像が次々と入れ替わったりさせることが出来ます。
今回は、マウスの操作で入れ替わる画像のお話です。
画像はこの３つの画像を使います。
ファイル名buton0.png |
ファイル名buton1.png |
ファイル名buton2.png |
で、下の画像をクリックしてみてください。
それでは、このソースです。
まずは、
<head>〜</head>の中に
<script language="JavaScript">
<!--
var i;
var img = new Array(2); //配列・・img[0]とimg[1]とimg[2]という変数を用意
for (i=0;i<3;i++){ //iが０の時１の時２の時と３回繰り返す。
img[i]= new Image();
img[i].src = "pic/buton"+i+".png";
//画像をあらかじめ読み込む
} //繰り返す範囲はここまで！
//-->
</script>
|
これは、複数の画像を扱うための下準備です。
ＪＡＶＡスクリプトでは、画像のファイルそのものを操作するためには、画像専用に変数を用意します。
var t;//tは変数
t = new Image();//tは画像を扱うことにする！！
この操作を「
ｔを画像オブジェクトにする。」と言います。
そして、
t.src = "画像のアドレス";とすると、そのページを読み込むときに、先にそのアドレスで指定した画像を読み込んでくれます。
もし、画像が切り替わる都度、画像を読み込んでいると、その切り替わりに時間がかかりますので、先に使う画像を読み込むようにしたいのです。
そして、今回は画像を３つ使いますので、画像に使う変数は３つ必要です。
この変数を
gazouA,gasouB,gazouCというふうに、適当に３つの変数名を用意しても良いのですが、ソースを書くのを楽にするために、”配列”というものを使いました。
配列を使うと・・・
変数名[番号]という形で、たくさんの変数を用意できます。
それが、
var img = new Array(2);です。（ ）の中は最後の番号を入れる。
こうすると、img[0]とimg[1]とimg[2]の合計３つです。（番号は０から始まるので、最後の番号は２になります。）
それで、
img[0] = new Image();
img[1] = new Image();
img[2] = new Image();
というふうに、それぞれを、「画像に使う変数」と指定して、
さらに、
img[0].src = "pic/buton0.png";
img[1].src = "pic/buton1.png";
img[2].src = "pic/buton2.png";
で、３つの画像を読み込みたいのです。
３枚の画像のファイル名はそれぞれ
buton0.png、buton1.png、buton2.pngです。
このようにしておくと、
for (i=0;i<3;i++){img[i]・・・ }を使って、３つの画像に対して、同じ操作をひとまとめに出来ます。
（こちらを参照）
それが、
for (i=0;i<3;i++){ //iが０の時１の時２の時と３回繰り返す。
img[i]= new Image();
img[i].src = "pic/buton"+i+".png";
//画像をあらかじめ読み込む
} //繰り返す範囲はここまで！
の部分です。
iが、０，１，２，と変わりながら３回繰り返します。
これで、画像を切り替える準備は出来ました。
次は、実際に画像を切り替える操作です。
それには、次のソースを追加します。
<body>〜</body>の中！
<span onMouseOver="document. bb.src = 'pic/buton1.png'"
onClick="document. bb.src = 'pic/buton2.png'"
onMouseOut="document. bb.src = 'pic/buton0.png'">
<img src="pic/buton0.png" name=" bb" width="207" height="104" border="0">
</span>
|
ｉｍｇタグには、最初に表示しておく画像のアドレスを指定しておきます。
そして、
name="bb"としておきます。
これが、画像を切り替えるときに必要なのです。
このｉｍｇタグをＪＡＶＡスクリプトで操作するために、ＪＡＶＡスクリプト用に名前を付けたのです。
そして、今回のＪＡＶＡスクリプトは、とても短いので、
<span>タグの
イベントハンドラの中に書きました。
onMouseOver="マウスカーソルが重なったときに行うＪＡＶＡスクリプト"
onClick="クリックしたときに行うＪＡＶＡスクリプト"
onMouseOut="マウスカーソルが離れたときに行うＪＡＶＡスクリプト"
そして、そのＪＡＶＡスクリプトは、
document.bb.src = "画像のアドレス" です。
この部分は画像を切り替える基本です。
document.images["bb"].src = "画像のアドレス" と書いても同じ働きをします。
これで、
bbと、名付けられたｉｍｇタグのｓｒｃの部分、つまり表示する画像を指定するのです。
マウスが重なったとき、クリックしたとき、マウスが離れたとき、それぞれに画像を指定しています。
それで、マウスの動きに合わせて画像が切り替わるのです。
（注）ダブルクォーテーション（”）の中には２重にダブルクォーテーションは使えませんので、シングルクォーテーション（’）で代用しているところに気をつけてください。この部分です。
onMouseOver="document.bb.src = 'pic/buton1.png'"