qpoonさん)が作成したものを二次加工したものです。*まずは「サイズ可変スライド」の実例を次のURLをｸﾘｯｸしてみて見ましょう。
http://shtezuka.com/water color/Switzerland/Switzerland.html
2.スクリプト「本文」
【「サイズ可変スライド」の設置法】
1.この「サイズ可変スライド」スクリプトは、宮本幸雄氏(qpoonさん)が作成したものを二次加工したものです。
*まずは「サイズ可変スライド」の実例を次のURLをｸﾘｯｸしてみて見ましょう。
http://shtezuka.com/water color/Switzerland/Switzerland.html
2.スクリプト「本文」
<html>
<head>
<META http-equiv="Content-Script-Type"
content="text/javascript">
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html;
charset=Shift_JIS">
<title>魅惑のスイス一人旅・サイズ可変スライショード</title>
<script
language="javascript">
<!--
fil=new
Array();
url="./";//写真のあるＵＲＬ又はフォルダ
//写真ファイル名とコメントを「,（コンマ）」で区切って書く
n=0;
n++;fil[n]="Switzerland01.jpg,イゼンフルー村ズルヴァルト集落";
n++;fil[n]="Switzerland02.jpg,オーバーホーフェン村";
n++;fil[n]="Switzerland03.jpg,ギンメルヴルト村ギンメラ集落";
n++;fil[n]="Switzerland04.jpg,グリンデルヴァルト・ボーデン地区";
n++;fil[n]="Switzerland05.jpg,グローゼ・シャイデック・アイガー";
n++;fil[n]="Switzerland06.jpg,シルヴァプラナ・ユリア峠方面";
n++;fil[n]="Switzerland07.jpg,フィデルン村フィンデルアルプ";
n++;fil[n]="Switzerland08.jpg,ブリエンツ湖";
n++;fil[n]="Switzerland09.jpg,マインフェルト村ローフェルス集落";
n++;fil[n]="Switzerland10.jpg,モントルー・ション城";
n++;fil[n]="Switzerland11.jpg,モン村レンッアー・ホルンを望む";
n++;fil[n]="Switzerland12.jpg,ヤウン村カペルボーテ゜ン集落";
n++;fil[n]="Switzerland13.jpg,ラウタープルネン村ストッキー地区";
n++;fil[n]="Switzerland14.jpg,ラダン村ブライトホルンを望む";
n++;fil[n]="Switzerland15.jpg,ルゲン村";
n++;fil[n]="Switzerland16.jpg,ロートホルン・マッターホルン";
//最初に表示する写真の大きさを設定してください。
img_h=300; //タテ長さ（ピクセル）
img_w=400;
//ヨコ長さ（ピクセル）
maisu=8;//サムネールの一行の枚数
kankaku=6000;//スライド間隔(ミリ秒)
//-->
</script>
</head>
<body
bgcolor=#cceedd onLoad="focus();chg()">
<center>
<font
size=6>サイズ可変スライショー</font><br>
お好みのサイズにしてご覧ください。
<script
language="javascript"
src="zoom.js">
</script>
</center>
</body>
</html>
3.「別ファイル」スクリプト
ritu=1; //表示倍率
c=0;
auto_flg=0;
//自動差し替え
function
chg(){
auto_flg=1;
c++;if(c>n){c=1;}
dd=fil[c].split(",");
document["img"+c].src=url+dd[0];
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
img_tim=setTimeout("chg()",kankaku);
}
//自動／手動切替
function
auto(){
if(auto_flg==1){
document.button_form.at.value="自動";
auto_flg=0;
clearTimeout(img_tim)
}else{
document.button_form.at.value="停止";
chg();
}
}
//駒送り
function
mov(m){
if(auto_flg==1){
document.button_form.at.value="自動";
auto_flg=0;
clearTimeout(img_tim)
}
c=c+m;
if(c>n){c=1;}
if(c<1){c=n;}
dd=fil[c].split(",");
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
}
//拡大、縮小
function
img_size(s){
ss=s;
ritu=ritu*ss;
document.hana.width=img_w*ritu;
document.hana.height=img_h*ritu;
size_tim=setTimeout("img_size(ss)",100);
}
//原寸復帰
function
img_size1(){
ritu=1;
document.hana.width=img_w*ritu;
document.hana.height=img_h*ritu;
}
//自動停止
function
img_stop(){
clearTimeout(size_tim);
}
//サムネルから呼出
function
img_no(m){
c=m;
dd=fil[c].split(",");
document.hana.src=url+dd[0];
document.button_form.namae.value=dd[1];
}
//初期セット
document.write('<form
name="button_form">');
document.write('<input type="button" value="縮小"
onMouseOver="img_size(0.95)"
onMouseOut="img_stop()">');
document.write('<input type="button"
value="原寸" onClick="img_size1()">');
document.write('<input
type="button" value="拡大" onMouseOver="img_size(1.05)"
onMouseOut="img_stop()">');
document.write('__');
document.write('<input
type="button" value="｜＜" onClick="mov(-1)">');
document.write('<input
type="button" value="停止" name="at"
onClick="auto()">');
document.write('<input type="button" value="＞｜"
onClick="mov(+1)">');
document.write('<br><br>');
//額入りの写真
dd=fil[1].split(",");
document.write('<table
border=7><tr><td><table
border=2><tr><td>');
document.write('<img
src="',url+dd[0],'" name="hana" galleryimg="no"
height=',img_h,' width=',img_w,'>');
document.write('</td></tr></table></td></tr></table><br>');
//名前表示窓
document.write('<input
type="text" name="namae" value="',dd[1],'" size=40
');
document.write('style="border-width:0;font-size:24;background-color:transparent;text-align:center;color:',document.fgColor,'">');
document.write('<br>');
//サムネル
document.write('<table
border=0><tr><td><br>');
for(i=1;i<=n;i++){
if(document.layers){
document.write('<a
href="javascript:img_no(',i,')"><img src="null.gif" name="img',i,'"
width=',img_w/8,' height=',img_h/8,'
border=0></a>.');
}else{
document.write('<span
onClick="img_no(',i,')"><img src="null.gif" name="img',i,'"
width=',img_w/8,' height=',img_h/8,'
border=0></span>.');
}
if(i%maisu==0){document.write('<br>');}
}
document.write('<br>');
document.write('</form>');
document.write('</td></tr></table>');
4.設置法
4-1.「2.スクリプト「本文」」を全て選択し、コピーします。
4-2.「ホームページ作成ソフト」の新規ページのソースを開き、「ホームページ作成ソフト」固有の<html>〜</html>
を削除します。
なお、「エディタ」または「メモ帳」を使う方法もありますが、ここでは「ホームページ作成ソフト」で説明します。
4-3.「4-1」でコピーしたスクリプト本文を「4-2」で削除したところに「貼り付け」ます。
4-4.貼り付けたスクリプト「本文」をあなた風に書き直します。
4-4-1.5行目のタイトル・・・・・(行の番号がふってありませんので、上から数えてください。・・・空白行も数えています。)
<title>魅惑のスイス一人旅・サイズ可変スライショード</title>
↑
この部分を書き直す。
4-4-2.12行〜27行目
n++;fil[n]="Switzerland01.jpg,イゼンフルー村ズルヴァルト集落";
↑ ↑
画像のファイル名と画像の名前または説明を書き直す。
4-4-3.30〜31行目
img_h=450; //タテ長さ（ピクセル）
img_w=600;
//ヨコ長さ（ピクセル）
↑
画像の縦・横寸法を書き直します。(寸法は自由ですが、全て同寸法にして下さい。)
4-4-4.33行目
maisu=8;//サムネールの一行の枚数
↑
本体画像の下のサムネイル(縮小画像)の一行の枚数を書き直します。(仮に14枚の画像ですと「8」とすると一行目
8枚、二行目6枚になります。)
4-4-5.34行目
kankaku=6000;//スライド間隔(ミリ秒)
↑
スライドをめくる秒数です。数字が小さくなるほど速くなります。
4-4-6.42行目
<script language="javascript" src="zoom.js">
↑
別ファイルです。ファイル名は任意ですが、今回はこのままにしておきましょう。
4-4-7.スクリプトの書き直しが終わりましたら、「名前を付けて保存」して下さい。
なお、これだけでは「プレビュー」しても「zoom.js」がファイル名だけですので画像は表示されません。
4-5.「3.「別ファイル」スクリプト」を全て選択し、コピーします。
4-6.「エディタ」または「メモ帳」を開いて、「4-5」でコピーした「別ファイル」スクリプトを「貼り付け」ます。
4-7.今回はスクリプトの書き直しをせず、このまま「名前を付けて保存」してください。(ファイル名は任意ですが、今回は「zoom.js」としてお
・・・・きます。)
保存先は「スクリプト本文」が保存されたフォルダです。また、保存する時の「拡張子」は「js」(
)となります。
4-8.蛇足ですが、使用する「画像」も「スクリプト本文」が保存されたフォルダに保存してください。
5.その他
BGM、ICONなどは「本文スクリプト」外にあなた風に挿入・貼り付けをして下さい。