g003
Copyright(C) 2004 web工房 All Rights Reserved
| 【技g003-1】画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する | ||
| 画像No. | 
|
画像が自動的に切り替わらないときは ［開始］ボタンをクリックして下さい |
| 【技g003-2】背景画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する | ||
|
[開始]ボタンをクリックすると 背景画像が一定時間間隔で替わります |
||
■【技g003-1】画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する
◆注意
※｢開始｣｢停止｣ボタンをクリックすると、テスキトフィールドやボタンの背景色が変化しますが、下記の解説では省略しています。
◆手順1a【テキストフィールド設置】
※テキストフィールドinputを<body>〜</body>間に作成する
※テキストフィールド(input)は<form>〜</form>内に記述し、name属性を指定する。
※<form>にもname属性を指定する
※value="1":初期値(1枚目=1から)
-----次の行から(copy)-----
<form name="FORM">
<input size="5" type="text" name="MSG" value="1">
</form>
-----上の行まで(copy)-----
◆手順1b【表示画像設置】
※最初に表示する画像を<body>〜</body>間に設置する
※画像にはname属性を指定する
※<img src="">:最初に表示する画像(0.JPG)の相対パスを指定
-----次の行から(copy)-----
<img src="photo/0.JPG" name="IMAGE" width="200" height="150" border="1">
-----上の行まで(copy)-----
◆手順1c【開始・停止ボタン設置】
※｢開始ボタン｣及び｢停止ボタン｣を設置する
-----次の行から(copy)-----
<input type="button" name="btn_start" value="開始" onclick="StartSlide()">
<input type="button" name="btn_stop" value="停止" onclick="StopSlide()">
-----上の行まで(copy)-----
◆手順2【スクリプト実行】
※スクリプトを実行する<body〜>間に記述
-----次の行から(copy)-----
<body onload="StartSlide()">
-----上の行まで(copy)-----
◆手順3【javascript】<head>〜</head>間に記述
-----次の行から(copy)-----
<script language="JavaScript">
<!--
var TIMER="3000"; //スライド切替時間(1秒=1000)
var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1)
var FILE="JPG"; //画像の拡張子(統一する)
var FOLDER="photo"; //画像を保存するフォルダ名(相対パス)
var TOTAL="5"; //画像の枚数*/
count=0; //最初の画像名(0から)
function StartSlide() {
if ( TIMER_ID == -1 ) {
TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行
}
}
function ChangeImg() {
count++;
count %= TOTAL;
document.IMAGE.src=FOLDER + "/" + count + "." + FILE; //画像を表示
document.FORM.MSG.value = count + 1; //画像Noを表示
}
function StopSlide() {
if ( TIMER_ID != -1 ) {
clearInterval(TIMER_ID);
TIMER_ID="-1" //スライド停止中
}
}
//-->
</script>
-----上の行まで(copy)-----
■【技g003-2】背景画像を一定時間毎に入れ替える/表示している画像Noをテキストフィールドに表示する
◆要点
※一定時間間隔で｢画像｣または｢背景画像｣を切り替える場合、｢画像｣と｢背景画像｣はほとんど共通の考え方・共通のスクリプトの使用が可能のです。下記では、相違点のみを解説します。
※｢開始｣｢停止｣ボタンをクリックすると、テスキトフィールドやボタンの背景色が変化しますが、下記の解説では省略しています。
◆手順1a【テキストフィールド設置】
※画像の場合と全く同じです
※name属性のみ変えて _B を付しています
-----次の行から(copy)-----
<form name="FORM_B">
<input size="5" type="text" name="MSG_B" value="1">
</form>
-----上の行まで(copy)-----
◆手順1b【背景画像設置】
※最初に表示する背景画像を<body〜>間に記述します
※スクリプスト名を変えています
※<img src="">:最初に表示する画像(0.JPG)の相対パスを指定
-----次の行から(copy)-----
<body style="background-Image=url(photo_B/0.JPG);">
-----上の行まで(copy)-----
◆手順1c【開始・停止ボタン設置】
※｢開始ボタン｣及び｢停止ボタン｣を設置する
-----次の行から(copy)-----
<input type="button" name="btn_start_B" value="背景画像切り替え開始" onclick="StartSlide_B()">
<input type="button" name="btn_stop_B" value="背景画像切り替え停止" onclick="StopSlide_B()">
-----上の行まで(copy)-----
◆手順2【スクリプト実行】
※オープンしたときに自動的にスクリプトを実行するには<body〜>間に下記のように記述します
※例示では記述していません
-----次の行から(copy)-----
<body onload="StartSlide_B()">
-----上の行まで(copy)-----
◆手順3【javascript】<head>〜</head>間に記述
※画像の場合とほとんど同じで、異なるのは画像のフォルダ名やname属性の他は //(*)の行だけです
-----次の行から(copy)-----
<script language="JavaScript">
<!--
var TIMER="5000"; //スライド切替時間(1秒=1000)
var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1)
var FILE="JPG"; //画像の拡張子(統一する)
var FOLDER="photo_B"; //画像を保存するフォルダ名(相対パス)
var TOTAL="5"; //画像の枚数*/
count=0; //最初の画像名(0から)
function StartSlide_B() {
if ( TIMER_ID == -1 ) {
TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行
}
}
function ChangeImg() {
count++;
count %= TOTAL;
document.body.style.backgroundImage="url(" + FOLDER + "/" + count + "." + FILE + ")"; //bodyの背景画像変更(*)
document.FORM_B.MSG_B.value = count + 1; //画像Noを表示
}
function StopSlide() {
if ( TIMER_ID != -1 ) {
clearInterval(TIMER_ID);
TIMER_ID="-1" //スライド停止中
}
}
//-->
</script>
-----上の行まで(copy)-----
◆手順4【背景画像のスタイル設定】
※背景画像のをウィンドウの中央に1枚だけ表示するようにしています
※ウィンドウをスクロールしても背景画像は動かないように設定しています(IE限定)
-----次の行から(copy)-----
body {
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
}
-----上の行まで(copy)-----
◆簡易的なスライドショースクリプトです。画像を指定時間毎に変更します。最後まで表示したら最初の画像に戻って繰り返します。
※｢画像｣も｢背景画像｣もほとんど同じ考え方です。
◆事例では判り易くするために｢画像番号｣も併せて変えるようにしています。
◆｢開始｣｢停止｣ボタンを設置しています。
◆htmlファイルと同じフォルダに画像フォルダ(例示は｢photo｣)を設置し、画像をすべて保存して下さい。
◆画像はサイズ及び拡張子すべて統一し、画像名は 0.JPG 1.JPG ...というように0からはじまる連番とします。
※背景画像は特にサイズ統一の必要はありませんが、同じぐらいのサイズの方がいいと思います。
◆画像名は0からですが、画像番号表示は判り易くするために1からはじまるよう｢画像名+1｣とテキストフィールドに表示しています。
【適用技】このページの技に適用した他の技です
◆[技m008]リンク文字にマウスを重ねるとテキストフィールドにメッセージを表示する
◆[技g002]背景画像を1枚だけ表示する
◆[技g010]ウィンドウをスクロールしても背景画像は動かない(固定)する
【応用技】
◆[技g011]画像をワイプして入れ替える
※画像が入れ替わるときワイプさせることもできます。ちょっとおしゃれです。
history
◇(2004.09.26)[技g011]画像をワイプして入れ替える、に関する情報を追加しました。
◇(2004.06)設置
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----