javaScriptでは、HTMLの<img>タグで書いた画像をImageオブジェクトとして扱います。それぞれの画像には<img>タグのname属性で設定した名前を使って「document.名前」としてアクセスします。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>試しに画像を表示してみる</title> </head> <body> <img src="img/0.JPG" name="img1" width="320" height="180" onclick="changePhoto();"> <br> <p>下の画像は一回マウスを乗せて、<br> マウスを外に出すと画像が切り替わります。</p> <img src="img/4.JPG" name="img2" width="320" height="180" onmouseout="this.src='img/3.jpg';"> <script> //変数初期化 var num = 0; function changePhoto(){ //次の写真へ切り替えるために数値を＋１ num++; /* 今回のサンプルでは６枚の画像を使用しています。 「num %= 6」 は 「num = num % 6」と同じです。 こうすることで、変数numの数値は常に６で割った時の余りに なります。つまり変数numの数値は 0～5の間です。 */ num %= 6; //画像を表示する document.img1.src ="img/" + num + ".jpg"; } </script> </body> </html> |
srcプロパティ
imageオブジェクトが管理する画像ファイルへのパスは、srcプロパティに格納されています。これはimgタグのsrcに属性に対応するものです。
|
1 2 3 4 |
<img src="img/0.jpg" name="Img1" > 上記のsrc属性は以下のsrcプロパティに対応しています。 document.Img1.src |
srcプロパティの値を、別のイメージのパスに変更することにより、下記のように画像を切り替えることができます。
|
1 |
document.img1.src ="img/" + num + ".jpg"; |
変数numが２の場合、右辺は「img/2.jpg」というパスとなり、srcプロパティに代入されます。
自分自身を示すthis
thisは、オブジェクトが自分自尊を示す特殊な値です。
|
1 |
onmouseout="this.src='img/3.jpg';" |
thisのsrcプロパティに「img/3.jpg」を代入しています。thisはその画像自身になります。ちなみに以下のように書いても大丈夫です長くて分かりにくいですが・・・
|
1 |
onmouseout="document.Img2.src='img/3.jpg';" |
Imageオブジェクト生成
new演算子とImageコンストラクタを使い、Imageオブジェクトを生成することができます。引数には幅、高さを指定します。
|
1 |
var img1 = new Image(100,50); //第１引数 幅、第２引数 高さ |
Imageオブジェクトを生成した後、srcプロパティに画像へのパスを設定すれば
画像が読み込まれます。
|
1 |
img1.src = "img/2.jpg"; |
画像のプリロードってなに？
たまにネットワーク速度が遅いときに、画像の読み込みに時間がかかってイライラすることがあります。それを避けるためには、onloadイベントパンドラから関数を呼び出し、その関数でImageオブジェクトを生成して、srcプロパティに画像へのパスを代入します。
こうすることで、画像がウェブブラウザのキャッシュに読み込まれて、画像の表示が速くなります。この仕組みを、画像のプリロードといいます。
|
1 2 3 4 5 6 7 8 |
function init(){ img = new Array[3]; for( var i = 0 ; i < img.length ; i++){ img[i] = new Img(100,50); img[i].src = "img/" + i + ".jpg; } } window.onload = init; |