画像の表示/JavaScript

画像を表示する

　画像を表示するデモです。

　ボタンをクリックすると、画像が表示されます。サンプルコードは、以下の通りです。

<button type="button" onclick="func1();">表示</button>
<span id="test1"></span>
<script>
function func1() {
    var x = document.getElementById("test1");
    x.innerHTML = '<img src="image/trump/11.png" alt="スペードA" />';
}
</script>

　赤字分部は空のテキストですが、ボタンがクリックされるとfunc1が呼び出され、青字部分でimgタグに置き換わります。

　この方法は使い方が簡単ですが、空の要素(span等)を用意しておく必要があり、表示場所が決まっている時しか使えません。

要素から作成する

　空の要素がない時、要素から作成して画像を表示させる事も出来ます。

<div id="test2">
<button type="button" onclick="func2();">表示</button>
</div>

<script>
function func2() {
    var img = document.createElement("img");
    img.src = "image/trump/11.png";
    img.alt = "スペードA";
    var x = document.getElementById("test2");
    x.appendChild(img);
}
</script>

　赤字分部は、img要素を作成しています。青字部分は、作成したimgの属性にファイル名と説明を追加しています。緑字部分では、img要素をid=test2の子ノードとして定義しています。

　このため、画像はdivの子ノードとして、div内の最後に追加されます。

　実行した時の表示は、最初のデモと同じです。空の要素を事前に作成していなくても追加出来ますが、指定した要素の最後しか追加出来ません。

要素の途中に追加する

　要素の途中に追加する事も出来ます。

<div id="test3">
<p>要素0</p>
<p>要素1</p>
</div>

<button type="button" onclick="func3();">表示</button>

<script>
function func3() {
    var img = document.createElement("img");
    img.src = "image/trump/11.png";
    img.alt = "スペードA";
    var x = document.getElementById("test3");
    var p = x.getElementsByTagName("p")[1];
    x.insertBefore(img, p);
}
</script>

　赤字分部は先ほどと同じで、img要素を作成し、属性を追加しています。

　青字部分は、div内にあるp要素の1番目(0から数える)をオブジェエクトとして参照するようにし、その前にimg要素を追加しています。

　このため、「要素0」と「要素1」の間に画像が表示されます。

　尚、x.getElementsByTagName("p")[1]の[]内の数字を変える事で、追加する場所を変更出来ます。又、数字ではなく変数にすると、変数の値によって追加する場所を変更する事も可能です。

画像をランダムに表示させる

　画像をランダムに表示させるには、if文等で条件分岐させたりランダムな数字を利用して、上で説明したimg.srcを書き換えます。

　以下はデモですが、表示させる画像の数もランダムにしています。

　ページが読み込まれる度に1〜4枚のトランプがランダムに表示されます。サンプルコードは、以下の通りです。

<div id="test4"></div>

<script>
func4();
function func4() {
    var ran1 = Math.ceil( Math.random() * 4 );
    for ( var i = 1; i <= ran1 ; i++ ) {
        var ran2 = Math.ceil( Math.random() * 13 );
        var img = document.createElement("img");
        img.src = "image/trump/1" + ran2 + ".png";
        img.alt = "";
        var x = document.getElementById("test4");
        x.appendChild(img);
    }
}
</script>

　変数ran1に1〜4の数字を代入し、for文でその回数繰り返し画像を表示しています。表示する画像は、赤字分部で指定しています。こちらも乱数を使って、画像をランダムに表示しています。画像のファイル名は「11.png」、「12.png」等になっています。

補足

　画像を表示するだけなら、document.write('<img src="image/trump/11.png" alt="スペードA" />');等で追加出来ます。但し、document.writeを表示したい所に記述する必要があります。

　本項では、DOM(Document Object Model)を利用して、HTMLの任意の場所に画像を表示しています。詳細は、「DOM」をご参照下さい。