ひとつづつ順に切り替える JavaScript |
戻 る |
* ファイルがスタートすると徐々に画像が現れ、徐々に消えます * 同時に画像に対応したコメントを、任意の位置に表示される指定が出来ます。 * 最後に指定した画像は、他の画像と一斉に表示される指定が出来ます * 指定した画像を順番に表示し、繰り返します * 数値の設定だけで、画像の指定や、位置や変化の調整が出来ます。 * Internet Explorer 6 以外のブラウザでは正しく表示されない場合があります。 * Netscape 7 では、全部が表示されたままになり、徐々に変化しません。
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。 「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。 ■ 「0」から順に、画像種類毎に設定します。 ■ 画像の座標を、画面左からの距離、画面上からの距離をピクセル値で入力します。 ■ 画像の表示させる時間を、秒数で入力します。 ■ 画像が徐々に変化する速さの値を入力します。 数字が大きいほどゆっくり変化します。（秒数ではありません） ■ 表示したい数の画像を、アドレスを含むファイル名で指定します。 ■ コメントの座標を、画面左からの距離、画面上からの距離をピクセル値で入力します。 ■ コメントの内容を入力します。タグが使用できます。 ■ 画面左端から左側基準線までの距離(px)を入力します。 ■ 画面上端から上側基準線までの距離(px)を入力します。 ■ 画像に対応したコメントを、同時に表示するかどうか、指示に従い指定します。 ■ 最後の画像で、一斉表示するかどうか、指示に従い指定します。 ■ １秒間に変化する回数を入力します。 // **************************** 入力事項 ******************************* // ======= 入力１：画像の種類と 位置・表示時間・メッセージ等 // 出したい画像の種類を必要数だけ、0 から順に設定する。 // １番目の数字で、画像の左側基準線からの距離(px)を入力。 // ２番目の数字で、画像の上側基準線からの距離(px)を入力。 // ３番目の数字で、表示する時間（秒）を入力。 // ４番目の数字で、徐々に変化する速さを入力。（数値が小さいほど速い） // ５番目でアドレスを含む画像ファイル名を入力。 // ６番目の数字で、メッセージの左側基準線からの距離(px)を入力。 // ７番目の数字で、メッセージの上側基準線からの距離(px)を入力。 // ８番目でメッセージの内容を入力。（タグ使用可能） image[0]=new Array( 100,110, 1.5,30, "../parts/file01.gif", 100,100, " １番目のメッセージ" ); image[1]=new Array( 400,445, 1.5,30, "../parts/file04.gif", 440,425, " ２番目のメッセージ" ); image[2]=new Array( 30,270, 1.5,30, "../parts/file03.gif", 30,250, " ３番目のメッセージ" ); image[3]=new Array( 580,100, 1.5,30, "../parts/file05.gif", 580, 80, " ４番目のメッセージ" ); image[4]=new Array( 30,430, 1.5,30, "../parts/file02.gif", 60,430, " ５番目のメッセージ" ); image[5]=new Array( 590,190, 1.5,30, "../parts/file06.gif", 600,190, " ６番目のメッセージ" ); image[6]=new Array( 270,120, 3.0,80, "../parts/main_file.gif", 290,150, " ７番目のメッセージ" ); // ======= 入力２：補助入力事項 var xjk = 0 ; // 画面左端より、左側基準線までの距離(px) var yjk = 0 ; // 画面上端より、上側基準線までの距離(px) var cmm = 1 ; // 同時コメントを表示するか？（ yes=1 , no=-1 ） var dal = 1 ; // 最後の画像で全部を表示するか？（ yes=1 , no=-1 ） // 速さが足りない（荒い）場合は、次の数値を大きくする var chg = 10 ; // 一秒当たりの描画の切替え回数 （初期値 10 回） // ************************ 入力事項ここまで ****************************
<script type="text/javascript">
<!--// decr_00 ver1.01 （ぱーぷりんの溜まり場）
image=new Array(); // この行はさわらないで・・
// **************************** 入力事項 *******************************
// ======= 入力１：画像の種類と 位置・表示時間・メッセージ等
// 出したい画像の種類を必要数だけ、0 から順に設定する。
// １番目の数字で、画像の左側基準線からの距離(px)を入力。
// ２番目の数字で、画像の上側基準線からの距離(px)を入力。
// ３番目の数字で、表示する時間（秒）を入力。
// ４番目の数字で、徐々に変化する速さを入力。（数値が小さいほど速い）
// ５番目でアドレスを含む画像ファイル名を入力。
// ６番目の数字で、メッセージの左側基準線からの距離(px)を入力。
// ７番目の数字で、メッセージの上側基準線からの距離(px)を入力。
// ８番目でメッセージの内容を入力。（タグ使用可能）
image[0]=new Array( 100,110, 1.5,30, "../parts/file01.gif", 100,100, "１番目のメッセージ" );
image[1]=new Array( 400,445, 1.5,30, "../parts/file04.gif", 440,425, "２番目のメッセージ" );
image[2]=new Array( 30,270, 1.5,30, "../parts/file03.gif", 30,250, "３番目のメッセージ" );
image[3]=new Array( 580,100, 1.5,30, "../parts/file05.gif", 580, 80, "４番目のメッセージ" );
image[4]=new Array( 30,430, 1.5,30, "../parts/file02.gif", 60,430, "５番目のメッセージ" );
image[5]=new Array( 590,190, 1.5,30, "../parts/file06.gif", 600,190, "６番目のメッセージ" );
image[6]=new Array( 270,120, 3.0,80, "../parts/main_file.gif", 290,150, "７番目のメッセージ" );
// ======= 入力２：補助入力事項
var xjk = 0 ; // 画面左端より、左側基準線までの距離(px)
var yjk = 0 ; // 画面上端より、上側基準線までの距離(px)
var cmm = 1 ; // 同時コメントを表示するか？（ yes=1 , no=-1 ）
var dal = 1 ; // 最後の画像で全部を表示するか？（ yes=1 , no=-1 ）
// 速さが足りない（荒い）場合は、次の数値を大きくする
var chg = 10 ; // 一秒当たりの描画の切替え回数 （初期値 10 回）
// ************************ 入力事項ここまで ****************************
// 共通変数・配列の設定
var no=image.length-1; inc=0; imgN=0;
// 開始値の設定
for(i=0; i<=no; i++){
document.write("<img src='"+image[i][4]+"' style='position:absolute;"
+"filter:alpha(opacity=0);' id='gaban"+i+"'>");
Disp("gaban"+i, image[i][0]+xjk, image[i][1]+yjk);
if(cmm>0){
document.write("<div style='position:absolute; filter:alpha(opacity=0);' "
+"id='mytext"+i+"'>"+image[i][7]+"</div>");
Disp("mytext"+i, image[i][5]+xjk, image[i][6]+yjk) } }
inc_sakura();
// 徐々に表示する
function inc_sakura() {
document.getElementById("gaban"+imgN).filters.alpha.opacity = inc;
if(cmm>0){
document.getElementById("mytext"+imgN).filters.alpha.opacity = inc }
if(inc<=100) {
inc+=400/image[imgN][3]; tim=setTimeout("inc_sakura()",1000/chg) }
else {
clearTimeout(tim); inc=100;
setTimeout("dec_sakura()", 1000*image[imgN][2]) } }
// 徐々に消す
function dec_sakura() {
document.getElementById("gaban"+imgN).filters.alpha.opacity = inc;
if(cmm>0){
document.getElementById("mytext"+imgN).filters.alpha.opacity = inc }
if(inc>0) {
inc-=400/image[imgN][3]; tim=setTimeout("dec_sakura()",1000/chg) }
else { clearTimeout(tim); inc=0; imgN++;
if(imgN==no && dal>0){ inc_all() }
else if(imgN<=no){ inc_sakura() }
else{ imgN=0; inc_sakura() } } }
// 一斉表示する
function inc_all(){
for(i=0; i<=no; i++){
document.getElementById("gaban"+i).filters.alpha.opacity = inc;
if(cmm>0){
document.getElementById("mytext"+i).filters.alpha.opacity = inc } }
if(inc<=100){
inc+=400/image[imgN][3]; tim=setTimeout("inc_all()",1000/chg) }
else {
clearTimeout(tim); inc=100;
setTimeout("dec_all()", 1000*image[no][2]) } }
// 一斉消去する
function dec_all() {
for(i=0; i<=no; i++){
document.getElementById("gaban"+i).filters.alpha.opacity = inc;
if(cmm>0){
document.getElementById("mytext"+i).filters.alpha.opacity = inc } }
if(inc>0){
inc-=400/image[imgN][3]; tim=setTimeout("dec_all()",1000/chg) }
else {
clearTimeout(tim); inc=0; imgN=0; inc_sakura() } }
// 画像を移動する
function Disp(num,xx,yy){
document.getElementById(num).style.left=xx;
document.getElementById(num).style.top =yy }
// -->
</script>