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

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

▲目次へ戻る