今回はJavaScriptで異なる画像を並べる方法について見ていきます。
完成イメージはこんな感じです。
全体的なレイアウトに関しては過去の記事「トランプカードの並びをCSSで整える」、「JavaScriptで画像を並べる」に詳細があります。
もちろん、この記事だけでも異なる複数の画像を並べる方法については理解できると思うのでご安心ください！
異なる画像のパスを配列に格納する
まずは表示する画像のパスを後でいちいち書かずとも番号で指定できるように配列に格納しておきます。
var cards = ["../../images/spade1.png",
"../../images/spade2.png",
"../../images/spade3.png",
"../../images/spade4.png",
"../../images/spade5.png",
"../../images/diamond1.png",
"../../images/diamond2.png",
"../../images/diamond3.png",
"../../images/diamond4.png",
"../../images/diamond5.png"];表示させたい順に格納しておくとよいでしょう。ここは割と地道な作業ですが、あらかじめファイル名を工夫しておくとやりやすいかもしれません。
ループ文で画像を並べる
上で準備した画像のパスをループ文を使って順番に表示させるだけです。
そもそもJavaScriptで画像を表示させるのってどうやるの？？という方は前回記事「JavaScriptで画像を並べる」に詳しく書いています。簡単なので確認してみてください。
var N = cards.length;
var text = "";
for (var i = 0; i < N ;i++) { //表示させたい画像の数だけループを繰り返す
if (i%5==0) { //５枚ごとに特別なスタイルを指定して改行する
text += '<img src=' + cards[i] + ' class="clear">'; //画像のパスは配列の番号で指定
}else{ //他の画像は普通に並べる
text += '<img src=' + cards[i] + '>'; //画像のパスは配列の番号で指定
}
}
//idで指定した要素のHTMLを書き換え画像を表示
document.getElementById("table").innerHTML = text;img{
width: 120px; /*幅*/
height: 180px; /*高さ*/
margin: 10px; /*余白*/
float: left; /*左寄せ*/
}
.clear{
clear.both. /*浮いてる要素への回り込みを解除*/
}
先ほど画像のパスを配列cards[]の中に格納したのでした。ここではループ文の中でそれらのパスを順番に指定した<img>タグを生成し、すべて変数textに書き加え、最後に.innerHTMLでHTMLを書き換えて全てを表示させます。
ループを繰り返す回数は変数Nで指定しています。その数は画像のパスを格納した配列cards[]の大きさ(長さ)と同じでしょう。配列の大きさは配列名.lentghで取得できます。
次回予告
今回はJavaScriptで複数の異なる画像を表示させる方法についてみてきました。
次回はクリックで画像を変更する処理についてお伝えしようと思います。例えば、「神経衰弱」を作るならば、はじめは裏面の画像を表示させておき、クリックするとカードがめくれるよう表面の画像に変更する必要があります。その他様々な場面でも画像の変更が必要となってくるでしょう。
いよいよ次回からJavaScriptの真骨頂である「動きのあるページ」作りに入っていきますので乞うご期待！
コメント