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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．背景画像の設定

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

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

<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">

let img = ["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg"];

let timer;
let 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 に設定されたタイマーを終了させています。

▲目次へ戻る