自動的に次の写真に切り替わっていくタイプの写真集です。
切り替わる時間は、画像毎に指定できます。
これは写真に対するコメントも表示できます。
最後の写真まで進むと、自動的にまた初めから始まります。
写真や画像をたくさん掲載されている際に写真集や画像集としてご利用下さい。
ただし全て同じサイズの画像をご使用下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
pic=new Array();
moji=new Array();
times=new Array();
//表紙になる1番目の画像を指定する
pic[0]="../syasinnsyuu.gif";
//表紙になる1番目の文字を指定する
moji[0]="いろんな色です。";
//表紙になる1番目の画像を表示する秒数を指定する
times[0]=5;
//2番目の画像を指定する
pic[1]="0.gif";
//2番目の文字を指定する
moji[1]="ピンクです。";
//2番目の画像を表示する秒数を指定する
times[1]=8;
//3番目の画像を指定する
pic[2]="1.gif";
//3番目の文字を指定する
moji[2]="濃いピンクです。";
//3番目の画像を表示する秒数を指定する
times[2]=3;
//4番目の画像を指定する
pic[3]="2.gif";
//4番目の文字を指定する
moji[3]="ベージュです。";
//4番目の画像を表示する秒数を指定する
times[3]=10;
//文字を表示する欄の横幅を指定する
pic_width=351;
//文字を表示する欄の横位置を指定する
x_iti=30;
//文字を表示する欄の縦位置を指定する
y_iti=500;
pics=new Array();
for(i=0; i<pic.length; i++)
{
pics[i]=new Image();
pics[i].src=pic[i];
}
function img_load()
{
for(i=0; i<pic.length; i++)document.images["hidden"].src=pics[i].src;
pic_hyouji();
}
kazari='<table width="'+pic_width+'"><tr><td>';
kazari2='</td></tr></table>';
my_timer=0; kazu=0; my_time=0;
function pic_hyouji()
{
document.images["mypic"].src=pics[kazu].src;
if(document.layers){
x_iti=(outerHeight-pic_width)/2+x_iti;
document.layers["lay0"].moveTo(x_iti,y_iti);
document.layers["lay0"].document.open();
document.layers["lay0"].document.write(kazari+moji[kazu]+kazari2);
document.layers["lay0"].document.close();
document.layers["lay0"].visibility='show';}
else if((document.getElementById) && (!document.all)){
document.getElementById("lay0").innerHTML=kazari+moji[kazu]+kazari2;
document.getElementById("lay0").style.visibility='visible';}
else if(document.all){
document.all("lay0").innerHTML=kazari+moji[kazu]+kazari2;
document.all("lay0").style.visibility='visible';}
kazu++;
if(kazu > pic.length-1)kazu=0;
if(kazu == 0)my_timer=times[times.length-1];
else my_timer=times[kazu-1];
clearTimeout(my_time);
my_time=setTimeout('pic_hyouji();',my_timer*1000);
}
//-->
</script>
</head>
<body onLoad="img_load();">
<table border="1" cellpadding="0" bgcolor="#f4d0ab">
<tr><td>
<img src="../syasinnsyuu.gif" name="mypic" width="350" height="216" border="0" alt="サンプル画像"><br>
</td></tr>
<tr><td height=60>
<img src="" name="hidden" width="1" height="1" border="0">
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>
</td></tr>
</table>
・
・
・
</body></html>
[ 解説 ]
まず写真集（もしくは画像集）で使用する画像をご用意下さい。
何枚でも結構です。
次に画像のURLとコメント、表示する秒数を指定します。
上から8行目〜22行目で指定しています。
pic[0]="syasinnsyuu.gif";
moji[0]="いろんな色です。";
times[0]=5;
の3行で1画像分のデータが構成されています。
最初の行に表示したい画像、真ん中の行に表示したい文字、下の行に表示したい秒数を記述します。
URLを記述している部分は、お好きなURLにご変更下さい。
数値が入ってる部分は切り替わる秒数を表していますので、
こちらもお好きな数値にご変更下さい。
例えば「times[0]=5;」でしたら、「5秒後に次の画像に切り替わる」と言う意味になります。
サンプルでは全部で4画像有りますので、上の2行と同じ様な行が4組有ります。
もし実際に使用される写真集が、4画像有未満ならば、不要な行を削除して下さい。
ただし、この時必ず下から削除します。
例えば使用したい写真集が3画像ならば、ソース上から19〜22行目の
pic[3]="2.gif";
moji[3]="ベージュです。";
times[3]=10;
を削除します。
同じ要領で、余計な行を削除して下さい。
画像数がもっと多い場合は、減らすのではなく3行を増やしてあげます。
pic[3]="2.gif";
moji[3]="ベージュです。";
times[3]=10;
をコピーペーストして、その真下に付け加えてください。
で、数字の「3」の部分を1つ繰り上げて「4」にします。
もっと増やすのなら、同じようにコピーペーストして数字部分をどんどん繰り上げて下さい。
例えば1つ画像を増やしたい場合は、
| 変更前 | 変更後 |
|---|
pic[0] ="syasinnsyuu.gif";
moji[0]="いろんな色です。";
times[0]=5;
pic[1] ="0.gif";
moji[1]="ピンクです。";
times[1]=8;
pic[2] ="1.gif";
moji[2]="濃いピンクです。";
times[2]=3;
pic[3] ="2.gif";
moji[3]="ベージュです。";
times[3]=10;
|
pic[0] ="syasinnsyuu.gif";
moji[0]="いろんな色です。";
times[0]=5;
pic[1] ="0.gif";
moji[1]="ピンクです。";
times[1]=8;
pic[2] ="1.gif";
moji[2]="濃いピンクです。";
times[2]=3;
pic[3] ="2.gif";
moji[3]="ベージュです。";
times[3]=10;
pic[4] ="4.gif";
moji[4]="これまた、ピンクです。";
times[4]=4;
|
のようになります。
反対に画像を減らしたい場合も、同じように2行を削除します。
例えばサンプルから1つ画像を減らすと、以下のようになります。
| 変更前 | 変更後 |
|---|
pic[0] ="syasinnsyuu.gif";
moji[0]="いろんな色です。";
times[0]=5;
pic[1] ="0.gif";
moji[1]="ピンクです。";
times[1]=8;
pic[2] ="1.gif";
moji[2]="濃いピンクです。";
times[2]=3;
pic[3] ="2.gif";
moji[3]="ベージュです。";
times[3]=10;
|
pic[0] ="syasinnsyuu.gif";
moji[0]="いろんな色です。";
times[0]=5;
pic[1] ="0.gif";
moji[1]="ピンクです。";
times[1]=8;
pic[2] ="1.gif";
moji[2]="濃いピンクです。";
times[2]=3;
|
上から16行目の「pic_width」に実際に使っている画像の横幅をご記入下さい。
上から17行目の「x_iti」にNN4.Xの場合の、表示させるX座標を指定してください。
同じく上から18行目の「y_iti」にNN4.Xの場合の、表示させるY座標を指定してください。
また写真集のページに来た時に表示させたい表紙などは、そのままHTML内のimgタグ部分をご変更下さい。
下から10行目にある
<img src="syasinnsyuu.gif" name="mypic" width="350" height="216" border="0" alt="サンプル画像"><br>
に、最初の画像URLをお書き下さい。
また、サイズなども自由にご変更下さい。
下から9行目のテーブルのセルの高さの指定ですが、これも適当にご変更下さい。
文字数が多い場合は、もっと高くした方がよいでしょうが、
2，3行ならば変更しなくても問題ないかと思います。
スクリプト以外のhtml部分に関しましては、お好きなようにデザインして下さい。
|
