ITコラム

laptop computer with blog web page on screen

JavaScript

2017.12.27

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

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

目次

 
1.背景画像の設定
2.スライドショー

1.背景画像の設定

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

 
 

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

<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プロパティをご参照下さい。

▲目次へ戻る

 

2.スライドショー

 
スライドショーのように、画像を一定時間で切り替えることもできます。
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 にタイマーを設定しています。

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

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.