ITコラム

laptop computer with blog web page on screen

JavaScript

2017.12.27

JavaScript【サンプル】８～画像関連の記述方法

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の画像関連の記述方法についてのサンプルを紹介します。

１．背景画像の設定

　
背景画像を設定・変更します。
画像ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp(dat) {

    document.body.style.backgroundImage = "url(" + dat + ")";

}
//-->
</script>

<div style="background-color : #CCC;">
    <a href="javascript:disp('photo1.jpg')">
        <img src="photo1.jpg" width="100" height="100">
    </a>　
    <a href="javascript:disp('photo2.jpg')">
        <img src="photo2.jpg" width="100" height="100">
    </a>　
    <input type="button" value="リセット" onClick="disp('none')">
</div>

ページ全体に背景画像を設定する場合は、「 document.body.style.backgroundImage = “url(‘画像ファイルのURL’)”; 」として画像ファイルのURLを指定します。

背景画像はデフォルト設定が「リピート有」のため、指定した画像ファイルが縦横にリピート表示されます。
　
　
画像ファイルをリピートさせずに背景画像に指定すると、次のようになります。
画像ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp(dat) {

    document.body.style.backgroundImage = "url(" + dat + ")";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";

}
//-->
</script>

<div style="background-color : #CCC;">
    <a href="javascript:disp('photo1.jpg')">
        <img src="photo1.jpg" width="100" height="100">
    </a>　
    <a href="javascript:disp('photo2.jpg')">
        <img src="photo2.jpg" width="100" height="100">
    </a>　
    <input type="button" value="リセット" onClick="disp('none')">
</div>

　
「 document.body.style.backgroundRepeat = “no-repeat”; 」として画像ファイルをリピートしないように指定しています。

そして、「 document.body.style.backgroundSize = “cover”; 」で、背景に表示する画像ファイルのサイズを指定しています。
「 cover 」は、画像の縦横比を維持したまま背景領域に収まる最大サイズに自動調整する指定です。

背景画像のサイズ指定については、background-sizeプロパティをご参照下さい。

▲目次へ戻る

２．スライドショー

　
スライドショーのように、画像を一定時間で切り替えることもできます。
STARTボタンとSTOPボタンをクリックしてみて下さい。

上のサンプルのソースコードは次の通りです。

<div style="background-color : #CCC;">
    <div style="display:inline-flex;">
        <input type="button" value="START" onClick="timerStart()">
        <input type="button" value="STOP" onClick="timerStop()">
    </div>
    <img src="photo3.jpg" id="dat" width="500" height="500">
</div>

<script type="text/javascript">
<!--
var img = ["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg"];

var timer;
var count = -1;

function timerStart() {
    //画像インデックス
    count++;

    //画像数確認
    if (count == img.length) count = 0;

    //画像出力
    document.getElementById("dat").src = img[count];

    //タイマーを設定
    timer = setTimeout("timerStart()",1000);
}

function timerStop() {

    //タイマーをクリア
    clearInterval(timer);
}
//-->
</script>

　
複数の画像ファイルを配列変数 img に格納して、START ボタンがクリックされたタイミングで 1 秒後（ 1000ミリ秒後）に画像表示処理を行う関数 timerStart を呼び出し、変数 timer にタイマーを設定しています。

カウント変数を、タイミング良く０に戻すことがポイントです。

STOP ボタンがクリックされると、関数 timerStop を呼び出して変数 timer に設定されたタイマーを終了させています。

▲目次へ戻る